Stretch Background Image

This page contains stretch background image. Feel free to copy and paste the stretch background image into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Stretched Background on 'div' Tag

The following example demonstrates how to stretch a background image within a div element. Strictly speaking, we use the HTML img tag for this background image. We do this because at the time of writing, CSS (version 2) didn't provide any means of stretching a background image. Once CSS 3 is released and supported by browsers, we will be able to do stretch background images using the background-size property.

Original Size

First, here's the background image at its normal size. (I've placed a black border around it to make it easier to see the actual size of the image).

Fireworks

Stretched Size

And here it is being stretched behind some text:

Fireworks

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

And here is the code:

A word of caution. This example uses absolute positioning. Be careful when positioning elements using CSS as you can get some pretty weird results. This will depend on the other content on your page, and where your stretched background is located in relation to it. Make sure you test your stretched background image in as many browsers as possible, and also use the browser's Zoom/Text Size tool to see how that affects your content.

Stretch Background Image across Whole Page

You might prefer to stretch your background image across the whole web page. To do this, you basically use the same principle as above - you stretch the image using the HTML img tag, then layer the content over the top.

Stretching the background of the whole page also requires some further considerations - such as removing the margins/padding from the whole page (assuming you want the image to stretch right to the edge of the page).

Below is an example of using the same image to stretch across the whole page.

VIEW EXAMPLE (opens in new browser window)

And here is the code: