You can do all of this in your html page OR you can add the content within the <style></style> tags into the styles.css page. If you choose to put it into the stylesheet and not in the html page take away the <style></style> tags. Do not forget that anytime you make a change in the admin, its going to rewrite the styles.css with styles_template.css, so make sure you update this in both files if you use the styless.css method.
- First,
make sure that all browsers have a 100% height, 0 margin, and 0 padding
on the html and body tags this content goes within the
<head></head> tags:
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style> - Add the image you want as the background as the first element of the Web page, and give it the id of bg (this goes after the </head> tag:
<body>
<img src="bgimage.jpg" alt="background image" id="bg" />
</body> - 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%;
} - Add all your content to the page inside of a division called "content". Add this below the image:
<div id="content">ALL OF YOUR CURRENT CONTENT</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. - 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;
} - But you're not done. Internet Explorer 6 isn't standards compliant
and still has some problems. There are many ways to hide the CSS from
every browser but IE 6, but the easiest (and least dangerous) is to use
conditional comments. Put the following after your style sheet:
...
</style>
<!--[if IE 6]>
<![endif]--> - Inside the comment, add another style sheet with some styles to get IE 6 to play nice:
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]--> - The final should look like this:
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<img src="bgimage.jpg" alt="background image" id="bg" />
<div id="content">ALL OF YOUR CURRENT CONTENT IN HERE</div>
</body><img src="bgimage.jpg" alt="background image" id="bg" />
<div id="content">ALL OF YOUR CURRENT CONTENT IN HERE</div>
