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.

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.

Shorthand Version (Quicker)

This could be re-written using the background shorthand property, as follows: background:url('http://www.htmlcodes.ws/images/backgrounds/background-image-3.gif') no-repeat bottom right;

Doing this saves you from typing out each specific property.

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:

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;

Shorthand Version

The shorthand version uses this code:background:url('http://www.htmlcodes.ws/images/backgrounds/background-image-4.jpg') repeat-x bottom;

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

Shorthand Version