Quackit Logo

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.


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:


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:


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 html 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 html 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:


Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites