HTML Background Image

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

Background Image Code

This example code applies a background image to an HTML div tag using the background-image property. You can add a background image to any HTML element, such as a div tag, body tag etc.

Source CodeResult
This div tag has got a background image. You could also apply a background image to the whole page if you like.

No-Repeat Image

You might notice that the above background image repeats across the whole width and height of its container. That is, if the container is larger than the image, the image will be re-drawn again and again until it fills the whole container.

Sometimes you might not want a background image to repeat like this. In this case, you'd need to add background-repeat:no-repeat to the CSS code (or its shorthand equivalent).

You can also specify where your image will be located by using the background-position property (or its shorthand equivalent). For example, background-position:bottom right;

Here's are two examples - explicit and shorthand:

Explicit Version

This version uses the explicit properties.

Source CodeResult
This div tag has got a background image. You could also apply a background image to the whole page if you like.

Shorthand Version (Quicker)

This could be re-written using the background shorthand property, as follows: background:url('http://pustudy.com/images/background-image-2.gif') no-repeat bottom right;

Doing this saves you from typing out each specific property.

Source CodeResult
This div tag has got a background image. You could also apply a background image to the whole page if you like.

Horizontal Repeat

You can also repeat the image vertically or horizontally. Again, this can be acheived with either the background-repeat property, or its shorthand equivalent. To repeat horizontally, use background-repeat:repeat-x, or just repeat-x in the shorthand version.

Here's an example using this background image:

Sample background image

Explicit Version

In this example, I also specify that the image be positioned at the bottom of the container. Therefore, I add this CSS code: background-position:bottom;

Source CodeResult
This div tag has got a background image repeating horizontally. You could also apply a background image to the whole page if you like.

Shorthand Version

The shorthand version uses this code:background:url('http://pustudy.com/images/background-image-2.gif') repeat-x bottom;

Source CodeResult
This div tag has got a background image repeating horizontally. You could also apply a background image to the whole page if you like.

Vertical Repeat

To repeat vertically, use background-repeat:repeat-y or its shorthand equivalent. Again, to specify which side for the image to appear on, use background-position or shorthand equivalent.

Explicit Version

Source CodeResult
This div tag has got a background image repeating vertically. You could also apply a background image to the whole page if you like.

Shorthand Version

Source CodeResult
This div tag has got a background image repeating vertically. You could also apply a background image to the whole page if you like.