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).

Stretched Size

And here it is being stretched behind some text:

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stretched Background</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>


</head>

<body>
	<div id="page-background"><img src="https://pustudy.com/images/backgrounds/background-image-2.gif" width="100%" height="100%" alt="Fireworks"></div>
	<div id="content">
	<h2>Stretched Background Example</h2>
	<p>The background image here has been acheived using an HTML/CSS hack. The page is layered. The image uses the HTML <code>img</code> tag - not the CSS <code>background-image</code> property.</p>
	<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 ahead - resize your browser!</p>
		<p>Back to the <a href="stretch-background-image.html">stretch background tutorial</a>.</p>
	</div>
</body>