开发者

how to set the stretch the background image with CSS

开发者 https://www.devze.com 2023-01-19 13:30 出处:网络
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

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>
0

精彩评论

暂无评论...
验证码 换一张
取 消