How to apply a full screen background image

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

1b. Add the image you want as the background as the first element of the Web page, and give it the id of bg:

<img id="bg" src="bgimage.jpg" alt="background image" />

1c. Position the background image so that it’s fixed at the top left and is 100% wide and 100% in height. Add this to your style sheet:

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

1d. Add all your content to the page inside of a division called “content”. Add this below the image:

<div id="content">All your content here - inc headers, paragraphs.</div>

Note: it’s interesting to look at your page now. The image should display stretched out, but your content is completely missing. Why? Because the background image is 100% in height, and the content division is after the image in the flow of the document – most browsers won’t display it.

1e. Position your content so that it’s relative and has a z-index of 1. This will bring it above the background image in standards-compliant browsers. Add this to your style sheet:

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

1f. So far, so good, but we’re not finished yet. Internet Explorer 6 isn’t standards compliant and still has some problems. There are many ways to hide the CSS from every browser but IE6, but the easiest (and least dangerous) is to use conditional comments. Enter the following code in your header information, just after the path to your style sheet:

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" charset="utf-8" />
<!--[endif]-->

Note: For this example, I have added the IE6-specific CSS code inline in the HTML file instead of in the separate ie6.css file, as you can see in the steps below.

1g. Inside the comment, add another style sheet with some styles to get IE6 to behave:

<!--[if IE 6]>
<style>
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
-->
<!--[endif]-->

<!--[if lte IE 6]>
<style>
#content { background-image: url(../images/BG-FULL.jpg); }
</style>
-->
<!--[endif]-->

Done!