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

16 s
16

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="https://stackoverflow.com/questions/376253/.myBackground.jpg", sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod='scale')";

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *