Is there a way to get a background in CSS to stretch or scale to fill its container?
16 s
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')";