FREE HTML CODE
Search HTML Code

HTML Stretch Background Image

This article provides HTML code to enable you to stretch a background image.
At the time of writing, the current version of CSS (CSS2) doesn't allow you to stretch background images (images specified using the CSS background-image property). The next version of CSS (CSS3) will provide for this with its 'background-size' property, but no browser will recognise that at the moment.
This article shows you a little HTML/CSS trick that gives you the same 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:
  1. Copy and paste the code into a plain blank text file
  2. Save the file with a '.html' extension (eg, "index.html")
  3. 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.


View the result

The Explanation

We start off with the usual tags for opening an HTML document:




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


We then open a style tag, so that we can add our CSS:



<style type="text/css">


The first bit of CSS ensures that there's no margin or padding applied to the html element and body element. We also ensure that these elements take up the full height of the browser:



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


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:



#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}


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 html and body elements:



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


Now that we've done our CSS, we close the 'style' tag that we previously opened:


</style>

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:


<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>

<![endif]-->


Then, we close the head tag and open the body tag:


</head>

<body>


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.

<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>


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.


<div id="content">
<h2>Stretch the Background!</h2>
<p>This text appears in front of the background image. This is because 
we've used CSS to layer the content in front of the background image. The 
background image will stretch to fit your browser window. You can see the 
image grow and shrink as you resize your browser.</p>

<p>Go on, try it - resize your browser!</p>
</div>


Then, all we need to do is close the body tag and html tag:



</body>
</html>


View the result
| More