CSS2 does not provide a mechanism to stretch a background image. To do this, you need to create two divs: one that contains a stretched image, and another to overlay content above it.
<style type="text/css">
#image {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#image img {
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
}
</style>
<div id="image"><img src="background.jpg" alt=""/></div>
<div id="content">
<p>This text appears in the foreground.</p>
</div>
The example above works well in IE7. To approximate the effect in IE6, add the following rules:
<!--[if IE 6]>
<style>
#image {
position:absolute;
z-index:-1;
}
#content {
position:static;
}
</style>
<![endif]-->