Background Stretch

The following examples show how you can have an image as a background and fit the dimensions of your browser window or the document.
Click the example link and make the window different sizes, the image resizes with the window.

<script type="text/javascript">
<!--
function initStretch(){
// to stretch the window width and height use
imgWidth = (window.innerWidth?window.innerWidth:document.body.clientWidth)
imgHeight =(window.innerHeight?window.innerHeight:document.body.clientHeight)

// to stretch the document width and height use
//imgWidth=document.body.scrollWidth
//imgHeight=document.body.scrollHeight

document.getElementById("bg_img").style.width = imgWidth+"px"
document.getElementById("bg_img").style.height = imgHeight+"px"

}

onresize=initStretch

// add onload="initStretch()" to the opening BODY tag

//-->
</script>

<div style="position:absolute;left:0px;top:0px;width:100%;z-index:1">BODY CONTENTS</div>

The image used as the background is given a z index of zero.
The rest of the body contents are placed in a div, this div is absolutely positioned at 0,0 with a z index of 1.

CSS version

<style>

body{margin:0px}

#bgimg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}

</style>

<img  id="bgimg" src="pic.jpg" border="0">

<div style="position:absolute;z-index:1">Body Contents</div>