Stretch and scale CSS background

For modern browsers, you can accomplish this by using background-size:

body {

    background-image: url(bg.jpg);

    background-size: cover;

}

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

That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).

For it to work with lower verions of Internet Explorer, try these CSS:

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

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

4 years ago

If you use all of the following, it will work in most browsers except Internet Explorer.

.foo {

    background-image: url(bg-image.png);

    -moz-background-size: 100% 100%;

    -o-background-size: 100% 100%;

    -webkit-background-size: 100% 100%; 

    background-size: 100% 100%;

} 

4 years ago

Use the CSS 3 property background-size:

#my_container {

    background-size: 100% auto; / width and height, can be %, px or whatever. /

}

4 years ago