How to apply a full screen background image

article header image

In many circumstances, a website background is generated by creating a very small (2px by 2px for instance) image and repeating it on the X and Y axes. It’s easy and it’s quick. If you want to use a gradient on the Y axis, you use an image that’s 2px wide and 500 or 600px or so high), and the other way around for a gradient from left to right.

But what if you want to use a gradient background image changing color or shade on both X and Y axes? For example with a circular gradient? And what if you needed to have this construction be IE6-compliant? In the Netherlands in 2011, there are still quite a few IE6 users, especially in corporate networks. Perhaps because they have a lame IT department, or are forced because of legacy web applications, who knows, but dinosaurs still roam the earth…

That makes things a bit more complicated, but nothing we can’t fix! I used two existing articles, but for some reason, that wasn’t enough to get it to work in my example, so I added some extra CSS tricks. Here’s the plan step-by-step:

1. Follow the steps covered in this very comprehensive article on , which covered matters very well for the modern browsers. However, the additional code for IE6 did not work for me: the background was shown, but nothing else (I assume because the rest of the page was positioned behind the background). For overview purposes, I’ll depict the steps from their article here as well:

1a. First, make sure that all browsers have a 100% height, 0 margin, and 0 padding on the html and body tags. Add the following code to your style sheet:

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]-->
2. To get it to work properly in IE6, follow the steps in this article at HasLayout.net. The article there allows no comments, so there was no way to verify whether I was the only one where it didn’t work. Maybe the solution simply does not work, more likely I had a combination with another bug, but I had to make a few changes to get it to work in IE6 as well:

2a. Copy the #bg and name it .bg (a class instead of an ID).

2b. Remove the #bg and add the image from step 2 of the HasLayout article.

2c. Add the same image as background within the .bg class.

2d. Changed the code from step 1g to:

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

Done!


foto Boris Hoekmeijer
My name is Boris Hoekmeijer, I'm a webdesigner and graphic designer.
I sometimes run into a problem for which I have to find my own solution because Google just won't tell me. That's when I climb behind my mechanical keyboard, and fire away until a tutorial materializes. One of the great things about the web: we can all help each other!
If this article has helped you, or if you have anything to add or ask, please leave a comment or share the post.
Cheers!

© 2010 ★ Published: October 27, 2010
2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

NAVI

Deze website maakt gebruik van cookies. Hoe zit dat?

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close