Background Image

This page contains HTML background image code. Using this code, you can add a background image to any HTML element.

You can add a background image to any HTML element by using the CSS background-image property. You can also use the background property, which allows/requires you to add other background related properties at the same time.

Here are some examples of adding a background image to an HTML document.

The `background-image` Property

The CSS background-image property allows you to add a background image to an HTML element. In the following example, we have a background image appearing behind the text.

Note that when using the background-image property, you should also specify a background color by using the background-color property. The background color is used in the event that the background image can't be displayed.

Source Code	Result
<div style="background-color:white;background-image:url(//www.html.am/images/backgrounds/background-image-2.gif);border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background image example</div>	HTML background image example

The `background-repeat` Property

In case your background image is smaller than the HTML element that contains it, you have the option of letting your background image repeat/tile across the page/element, or just display once.

You can specify this using the background-repeat property. If you don't use this property, most browsers will repeat your image by default. If you don't want this to happen, just specify background-repeat:no-repeat.

You can also specify repeat-x to repeat horizontally only, or repeat-y to repeat vertically only.

`background-repeat:no-repeat`

Source Code	Result
<div style="background-color:white;background-image:url(//www.html.am/images/backgrounds/background-image-2.gif);background-repeat:no-repeat;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background image example</div>	HTML background image example

`background-repeat:repeat-x`

Source Code	Result
<div style="background-color:white;background-image:url(//www.html.am/images/backgrounds/background-image-2.gif);background-repeat:repeat-x;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background image example</div>	HTML background image example

`background-repeat:repeat-y`

Source Code	Result
<div style="background-color:white;background-image:url(//www.html.am/images/backgrounds/background-image-2.gif);background-repeat:repeat-y;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background image example</div>	HTML background image example

The `background-position` Property

You can determine the position that your background image appears within its containing box. For example, you might want your image to appear in the center. Or you might want it to appear at the top, right. In any case, you can specify your background image's position by using the background-position property.

Example - With `no-repeat`

Source Code	Result
<div style="background-color:white;background-image:url(//www.html.am/images/backgrounds/background-image-3.gif);background-repeat:no-repeat;background-position:bottom right;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Example - With `repeat-x`

In this example, the background image repeats horizontally across the <div> element.

Source Code	Result
<div style="background-color:white;background-image:url(//www.html.am/images/backgrounds/background-image-2.gif);background-repeat:repeat-x;background-position:center;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

The `background-attachment` Property

You can "fix" your background image in the same place so that, even when the user scrolls, it remains fixed. In other words, the background image doesn't scroll (even though the rest of the content scrolls).

Here's an example:

Source Code	Result
<div style="background-color:white;background-image:url(//www.html.am/images/backgrounds/background-image-3.gif);background-attachment:fixed;border:1px solid black;width:200px;height:200px;font-size:18px;line-height:3em;overflow:scroll;"><p>In this example, we'll add plenty of text so that the outer 'div' will develop scrollbars.</p> <p>We'll also need to add 'overflow:scroll' to our code in order to tell the browser to grow scrollbars when the contents are too big to fit inside.</p> Heck, while we're at it, let's increase the text size and line height too - not to mention reduce the size of the container!</div>	In this example, we'll add plenty of text so that the outer 'div' will develop scrollbars. We'll also need to add 'overflow:scroll' to our code in order to tell the browser to grow scrollbars when the contents are too big to fit inside. Heck, while we're at it, let's increase the text size and line height too - not to mention reduce the size of the container!

Source Code

Result

<div style="background-color:white;background-image:url(//www.html.am/images/backgrounds/background-image-3.gif);background-attachment:fixed;border:1px solid black;width:200px;height:200px;font-size:18px;line-height:3em;overflow:scroll;"><p>In this example, we'll add plenty of text so that the outer 'div' will develop scrollbars.</p> <p>We'll also need to  add 'overflow:scroll' to our code in order to tell the browser to grow scrollbars when the contents are too big to fit inside.</p> Heck, while we're at it, let's increase the text size and line height too - not to mention reduce the size of the container!</div>

In this example, we'll add plenty of text so that the outer 'div' will develop scrollbars.

We'll also need to add 'overflow:scroll' to our code in order to tell the browser to grow scrollbars when the contents are too big to fit inside.

Heck, while we're at it, let's increase the text size and line height too - not to mention reduce the size of the container!

The `background` Property

As mentioned, the CSS background property allows you to add all your background related properties all in one go.

This is a more efficient way to code your background image properties.

Here's an example of using the background property.

Source Code	Result
<div style="background:white url(//www.html.am/images/backgrounds/background-image-2.gif) repeat fixed;border:1px solid black;width:300px;height:200px;font-size:18px;">HTML background image example</div>	HTML background image example

Background Image

The background-image Property

The background-repeat Property

background-repeat:no-repeat

background-repeat:repeat-x

background-repeat:repeat-y

The background-position Property

Example - With no-repeat

Example - With repeat-x

The background-attachment Property

The background Property