Whirlwind990 Whirlwind990 - 4 years ago 104
CSS Question

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:

background: #F9C112 url(../img/pan1.jpg) no-repeat center top ;

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download