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

user_12714445 0
Viewed 186

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.

css html
2 Answers

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>

user_137059790

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;
user_87330220
Related