The Background-Repeat Property

The background-repeat property determines whether and how an image is repeated in the element. By default, an image is initially placed in the upper-left corner of the element (or of the window if the image has the background-attachment value of fixed; we discuss this property shortly). Repetition of an element begins from either this default position or from a new position that you set with the background-position property, which we discuss shortly.

Name:	background-repeat
Value:	repeat | repeat-x | repeat-y | no-repeat
Initial:	repeat
Applies to:	all elements
Inherited:	no
Percentages:	N/A

This property has four possible values:

• repeat The image is repeated both horizontally and vertically as often as needed to fill the entire element. This process is called tiling. This is the default.

• repeat-x The image is repeated horizontally (along the x-axis) across the element in a single row, both left and right from the initial position.

• repeat-y The image is repeated vertically (along the y-axis) down the element in a single column, above and below the initial position.

• no-repeat The image is not repeated. It appears only once, in the upper-left corner of the element, or wherever it is placed with the background-position property.

A repeated image is most often a picture of a repeat pattern, such as a dot or wave pattern. But, you can repeat an image of anything you want. Note that repeating images may cause part of the images to be cut off at one or more edges of the screen, as Figure 10.7(a) and 10.7(c) show.

Figure 10.7. The four values of background-repeat in action: (a) repeat; (b) repeat-x; (c) repeat-y; (d) no-repeat.

The following are examples of rules for each value of background-repeat. Figure 10.7(a) (d) show the result of each.

 background-image: url(tile);        /* (a) */ background-repeat: repeat; background-image: url(tile);        /* (b) */ background-repeat: repeat-x; background-position: center; background-image: url(tile);        /* (c) */ background-repeat: repeat-y; background-position: right; background-image: url(tile);        /* (d) */ background-repeat: no-repeat;