background-repeat (CSS property)

Spec
Inherited Initial Version
No repeat CSS1
Browser support (more…)
IE8+ FF1+ SA3.1+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

background-repeat: { repeat | repeat-x | repeat-y | no-repeat | inherit } ;

Description

The background-repeat property controls whether or not a background-image is repeated (tiled), and if it is repeated, the property defines along which of the specified axes (x, y, or both) the image is to be repeated.

By default, a background-image is repeated along both vertical and horizontal axes, and is repeated in both directions. We use the background-repeat property to specify the axis along which an image should be repeated.

When a background image is repeated, it’s first placed according to the background-position property, and then begins repeating from that point in both directions. For example, a background-image that’s placed at a background-position of center center (the center of the element), and which has a background-repeat value of repeat, will repeat in both directions along the x and y axes—that is, up and down, left and right, starting from the center.

The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders.

Some area of the element in question must be visible if the background-image is to show through. If the element has no intrinsic height (either as defined by its content, or by its dimensions), the background won’t be visible. If an element contains only floated children that haven’t been cleared—see clear—no background will show, as the element’s height will be zero.

The tiling and positioning of the background-image on inline elements isn’t defined in the CSS2.1 specification, but it might be addressed in future versions.

Example

This style rule causes a background-image assigned to the element with ID "example" to repeat along the x axis:

#example{
  background-repeat: repeat-x;
}

Value

repeat

The value repeat ensures that the background-image is repeated in both directions (that is, left and right, and up and down), and along both axes, until the element’s background is fully covered.

repeat-x

The value repeat-x ensures that the background-image is repeated only along the x axis (that is, the horizontal axis in both directions—left and right) until the element’s background is fully covered along that axis.

repeat-y

The value repeat-y ensures that the background-image is repeated only along the y axis (that is, the vertical axis in both directions—up and down) until the element’s background is fully covered along that axis.

no-repeat

The value no-repeat ensures that the background-image is not repeated in any direction, and that only a single instance of the image will be placed at the coordinates specified by the background-position.

If no background-position has been specified, the image is placed at the element’s default left-top position (0,0).

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Buggy Full Full Full Full Full Buggy Buggy Full Full Full Full Full Full

Safari versions up to and including 2.0 exhibit a background-repeat bug: the image is repeated incorrectly when no-repeat has been applied. This bug is evident when the image’s height exceeds that of the element to which it’s applied, and when the image is offset from the top position. In these cases, the image will repeat upwards, filling in the area immediately above the point at which the image was initially placed.

Internet Explorer for Windows versions up to and including 7 will only apply the background from inside the border’s edge when the element in question has a layout. If the element does not have a layout, the background-color or background-image will slide under the borders as per the specifications.

In Internet Explorer for Windows version 8 an animated transparent GIF that is repeated using repeat-x or repeat-y fails and the transparency is replaced as a solid black colour.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

User-contributed notes

ID:
#7
Contributed:
by Paul O'B
Date:
Sun, 13 Feb 2011 12:20:03 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

@Re utopixe "FF & IE dutifully ignore the 30px y-axis starting position. Any ideas?"

Apologies for the late reply but I see the elements starting at 30px from the top and repeating in both directions as expected.

ID:
#4
Contributed:
by utopixe
Date:
Sat, 15 Nov 2008 00:16:03 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

"When a background image is repeated, it’s first placed according to the background-position property, and then begins repeating from that point in both directions."

That would be expected, but doesn't seem to be the case when you're positioning using values instead of constants.
My example:
#id { background: transparent url(../img/skin/verticalDots.gif) repeat-y 100% 30px; }

FF & IE dutifully ignore the 30px y-axis starting position. Any ideas?

Related Products