CODEWITHSUNDEEP
htmlcss
Whirlwind990
Whirlwind990

Reputation: 99

Fitting a large background image to fit in a small div

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
}

Upvotes: 0

Views: 8981

Answers (4)

rjps12
rjps12

Reputation: 605

can you try this?

background-size:100%;

Upvotes: 2

gagiD
gagiD

Reputation: 36

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>

Upvotes: 0

KimvdLinde
KimvdLinde

Reputation: 617

Try adding this:

background-size: 100% 100%;

if you use 

background-size: 100%;

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

Upvotes: 2

Matt Komarnicki
Matt Komarnicki

Reputation: 5422

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

Upvotes: 3

Related Questions