Background Repeat

This page contains HTML "background repeat" code - code that enables you to make your background image to "repeat" or "tile" across the page or other HTML element.

To make your background image repeat, you can use the CSS background-repeat property (in conjunction with the background-image) property. However, you're better off using the background property, which enables you to specify all your background related properties at the same time.

Here are some examples of making a background image repeat (or not repeat, as required) against a <div> element.

Not Adding the background-repeat Property

First, we'll add a background image without using background-repeat. You will probably notice that the image repeats anyway. This is because most/all browsers automatically make the background image repeat, unless otherwise specified.

The background-repeat Property

Now we'll use the CSS background-repeat property. This property is quite self-explanatory, so we'll get right to it. In this case, we'll specify no-repeat. We could also specify repeat-x to make it repeat horizontally, repeat-y to make it repeat vertically, or simply repeat to repeat horizontally and vertically.

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 related properties.

Here are examples of using the background property to set the "background-repeat" property.

no-repeat

repeat-x

Image repeats horizontally.

repeat-y

Image repeats vertically.