Background Image Code

You can add a background image to a web page or HTML element by using the CSS background-image property or the background property. One of the benefits of doing this is that you can still add content in front of the image (such as text and other elements). This content appears just as it normally would even if the background image wasn't there.

To use these properties, you apply them to the HTML element that you wish to add the background image to. For example, you could apply a background image to a <div> element, like this:

Source CodeResult
This text appears in front of the background image.

"Repeating" Background Images

If the background image is smaller than the HTML element that it's applied to, it will "repeat" across the full width and height of the HTML element. In other words, instead of just appearing once, the background image will appear again and again until it uses up the full size of its parent container. Example below.

In this example, we set the <div> element to be larger than the background image. The background image is 225 pixels wide and 151 pixels high. Let's make the parent container (i.e. the <div>) 300 pixels wide and 200 pixels high.

Source CodeResult
This text appears in front of a repeating background image.

Background Pattern

Here's another example, this time using an image that's more suitable for being repeated.

Here's the image on it's own (without being repeated). This image is 137 pixels wide and 129 pixels high.

Background pattern

Now, let's use it as the background of an element that's 300 pixels wide by 200 pixels high.

Source CodeResult
This text appears in front of a repeating background image.

How Do I Stop It Repeating?

Many times, you might prefer that the image doesn't repeat. Perhaps you only want it to appear once as a background image. Easy!

To stop your background image from repeating, you can use the background-repeat property along with the background-position. Alternatively, you can just use the background property to set all your background properties at once.

Source CodeResult
This text appears in front of a repeating background image.

Embedded Images

You can also have embedded images on your web page. These are images that are simply embedded into your web page as their own HTML element, as opposed to being a background of another element. See HTML Image Codes to embed an image into your web page.

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.

My Related Sites

Here are some of my other sites: