Question

So I have a div with a background image. I would like the background image to always be 100% on the screen no matter what the screen size is. I would like the image to grow in proportion but crop the height. I don’t want the image to stretch. What I have so far is:

#banner {
background:url(../images/blurry.jpg) no-repeat;
width:100%; 
height:520px;
background-size:100% 100%;

}

At the moment this is stretching the image to 100% and making the image look stretched.

Can anyone help me with this or point me in the right direction?

Answer 1

Use the CSS3 background-size property. Set it to cover. Like so:

background-size: cover;

Note that only IE9 and later supports this property value. IE8 will complain about an unsupported value. Chrome and Firefox supported cover since the past couple of years at least.