HTML Stretch Background Image

This article provides HTML code to enable you to stretch a background image.

Using CSS3

CSS3 introduced a new property - background-size - that enables you to change the size of background images. That means you can stretch your image horizontally, vertically, or both. You can resize it any way you wish.

CodeResult

Stretched background...

And here is the image at it's original size:

Stretching the Background Image for the Whole Page

You can use the same method to stretch the background of your whole web page.

Here's an example.

Simply apply the background-size against the <body> element (or any other content wrapper that you like). You might need to ensure that the <body> element's height property is set to 100% to get the best effect.

Using CSS2 & HTML

Although the background-size property is the recommended way to stretch your background images, you may encounter the odd browser compatibility issue. At least, when this article was first written, browser support for this new property was non-existent. And because of this, if you wanted to stretch background images, things were a bit more complicated than simply adding the size you wanted the background to be.

The rest of this article shows you how to stretch a background using this method.

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:

Copy to Clipboard
<!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>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet 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]-->
</head>
<body>
	<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
	<div id="content">
	<h2>Stretch that Background Image!</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>
</body>
</html>

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.

The Explanation

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

Copy to Clipboard
<!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:

Copy to Clipboard
<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:

Copy to Clipboard
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:

Copy to Clipboard
#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:

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

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

Copy to Clipboard
</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:

Copy to Clipboard
<!--[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:

Copy to Clipboard
</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.

Copy to Clipboard
<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.

Copy to Clipboard
<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:

Copy to Clipboard
</body>
</html>

Enjoy this page?