How to make border-radius work in case there is a div tag with an image-CodePudding

I have HTML and CSS like this:

.item {
  width: 100%;
  height: 768px;
  background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 50px 50px;
}

<div class='item'></div>

When I resize the browser, the bottom border-radius doesn't work.

CodePudding user response：

Change background-size: cover; and you could add background-position: center; to center your image.

.item {
  width: 100%;
  height: 768px;
  background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius:50px 50px;
}

  <div class='item'></div>

CodePudding user response：

As mentioned in other answers, you might want to use background-size: cover;. It will stretch the image to cover the whole area of the div (so the border-radius will be visible).

However since the image can be cropped after this change (specifically in the case when it does not have the same aspect-ratio like the area of the div), it might be necessary to use also background-position to position the background image as you like (by default it is aligned to the top left corner).

Most probably you will have good results with centering it, but the possibilities are endless ;)

background-size: cover;    
background-position: center;