Stretch and scale CSS background

Question

Is there a way to get a background in CSS to stretch or scale to fill its container?

Answer 1

For modern browsers like Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9, you can use background-size like this:

body {

    background-image: url(bg.jpg);

    background-size: cover;

}

Here, cover means stretching the image either vertically or horizontally so it never tiles/repeats.

For lower versions of Internet Explorer, try using the below CSS code:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";