19 October, 2007

How do you stretch a background image?

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

< html>
< head>
< title>Background to fit screen</title>

<style type="text/css">

html {height:100%;}

body {height:100%; margin:0; padding:0;}

/* set the background image to full capacity of the viewing area */

#bg {position:fixed; top:0; left:0; width:100%; height:100%;}

/* places the content on top of the background image */

#content {position:relative; z-index:1;}

</style>
<!--[if IE 6]>
<style type="text/css">

/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}

</style>
<![endif]-->
</head>

<body>

<div id="bg"><img height="100%" alt="" src="yourimage.jpg" width="100%" /></div>
<div id="content"><p>Enter your content here.</p></div>