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 CodeResult
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 CodeResult
HTML background image example

background-repeat:repeat-x

Source CodeResult
HTML background image example

background-repeat:repeat-y

Source CodeResult
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 CodeResult
HTML background position example

Example - With repeat-x

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

Source CodeResult
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 CodeResult

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 CodeResult
HTML background image example

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Related Sites

Here are some other sites you may like: