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:

"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.

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.

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

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.

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.