0

So I have an image which is 700px width which is what I'm using as a background image in a div which is 200px width.

I want to keep the image at that size so it can maintain a good resolution for smaller devices. However the issue I'm having is because the image is larger than the div the image overflows (hidden) but I want the image to resize and fit depending on the size of the div, instead of overflowing.

My div is currently:

.featurebox{
background: #F9C112 url(../img/pan1.jpg) no-repeat center top ;
width:200px
}
Whirlwind990
  • 99
  • 2
  • 14
  • Does this answer your question? [Background images: how to fill whole div if image is small and vice versa](https://stackoverflow.com/questions/4779577/background-images-how-to-fill-whole-div-if-image-is-small-and-vice-versa) – Heretic Monkey Apr 21 '20 at 16:22

4 Answers4

3

Define both width and height and then use background-size: cover

Matt Komarnicki
  • 5,198
  • 7
  • 40
  • 92
2

can you try this?

background-size:100%;
W4R10CK
  • 5,502
  • 2
  • 19
  • 30
rjps12
  • 587
  • 6
  • 15
2

Try adding this:

background-size: 100% 100%;

if you use 

background-size: 100%;

the height is set to auto, and can then still overlap.

KimvdLinde
  • 587
  • 8
  • 19
0

You can set background-size:

.featurebox {
background: #F9C112 url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center top;
background-size: 200px 200px;
width: 200px;
height: 200px;
}
<div class="featurebox">
</div>
gagiD
  • 36
  • 7