how to set the stretch the background image with CSS

Question

how to stretch the background images using CSS for page backgrounds and for DIV & table backgrounds... so that if the window size changes the background image size should stretch (expand / contract) accordingly....

Answer 1

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

Answer 2

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>