how to stretch the background images using CSS for page backgrounds and for DI开发者_如何学运维V & table backgrounds... so that if the window size changes the background image size should stretch (expand / contract) accordingly....
Only can be done in CSS3 with background-size
. You can also use -o-background-size
, -webkit-background-size
, and -moz-background-size
to try and maximize browser support. You should set the value to be 100%. In other browsers you can repeat the background or use a color once you're out of image, but not stretch. There are suggestions in the first link below to try and fake it.
See:
- http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
- https://developer.mozilla.org/en/CSS/background-size
You can do it without css3 by fixing it as a layer.
<img src="background.png" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; position:absolute; z-index:-1;" />
<div style="position: static;z-index: 1; ">
content
</div>
精彩评论