Stretch background image css?
.style1 {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Works in:
- Safari 3+
- Chrome Whatever+
- IE 9+
- Opera 10+ (Opera 9.5 supported background-size but not the keywords)
- Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
In addition you can try this for an IE solution
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;
Credit to this article by Chris Coyier http://css-tricks.com/perfect-full-page-background-image/
CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
.style1 {
...
background-size: 100%;
}
You can specify just width or height with:
background-size: 100% 50%;
Which will stretch it 100% of the width and 50% of the height.
Browser support: http://caniuse.com/#feat=background-img-opts