Stretch Background Image using CSS Layers
Before you use this code, be sure to check out the best way to stretch a background image. That would be the best way in most (if not all) cases.
If however, you have reason not to use that method, check out the method below.
Before the CSS background-size property was invented (or at least, implemented across all major browsers), the following method was the best way to acheive the "stretched background image" effect.
The trick is to use the HTML <img> tag along with CSS layers. By doing this, you can force your image to the background so that the rest of the content on the page appears in front of it. Doing this also enables you to stretch your background image to fit the whole browser window - regardless of its size.
The Code
Don't have time for explanations? No problem! Here's the code:
Note that this code specifies a whole HTML page so, to use this code:
- Copy and paste the code into a plain blank text file
- Save the file with a '.html' extension (eg, "index.html")
- Change the image code to point to your own image.
When you view the file in your browser, the background image will stretch to the size of the browser window.
The Explanation
We start off with the usual tags for opening an HTML document:
We then open a <style> tag, so that we can add our CSS:
The first bit of CSS ensures that there's no margin or padding applied to the <head> element and <body> element. We also ensure that these elements take up the full height of the browser:
The next piece of CSS sets the properties for our image, or more specifically, the <div> element that will contain the image.
The selector is '#page-background' because we will give the div element an id value of 'page-background'. We set its position to 'fixed'. This means that the image will stay fixed, even as you scroll down the page. We position it using the top and left properties. We also set its height and width to take up the full screen:
Next, our selector is '#content' because the remaining content on the page will be nested between a div element with an id value of 'content'.
The z-index property is used to layer the HTML elements. Elements with a higher z-index value appear in front of those with a lower z-index value.
We also add some padding to compensate for removing the margin and padding properties from the <head> and <body> elements:
Now that we've done our CSS, we close the <style> tag that we previously opened:
So, we've done all the CSS we need to right? ...WRONG!
The following code is special code we use just for Internet Explorer 6. This is because, IE 6 doesn't recognize our previous CSS.
Now, the way we do this is by using a "conditional comment". A conditional comment is something that only Microsoft browsers recognize. They enable us to specify a separate style sheet for each (or any) version of IE.
And, because conditional comments begin and end like an HTML comment, other browsers simply ignore everything in between.
So, here's the code for IE 6:
Then, we close the <head> tag and open the <body> tag:
This is where we specify our image. Note that we place the image code inside a <div> tag with an id of 'page-background'. You'll remember that we specified the styles for 'page-background' before - within our style sheet.
This is where the rest of the page content goes. Notice that it is all wrapped within a <div> tag with an id of 'content'? Again, you'll remember that we created the styles for 'content' back in our style sheet.
Then, all we need to do is close the <body> tag and <html> tag: