background-repeat (CSS property)
| IE5.5+ | FF1+ | Saf3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | repeat |
CSS1 |
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;
}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.
Value
repeatThe value
repeatensures that thebackground-imageis 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-xThe value
repeat-xensures that thebackground-imageis 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-yThe value
repeat-yensures that thebackground-imageis 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-repeatThe value
no-repeatensures that thebackground-imageis not repeated in any direction, and that only a single instance of the image will be placed at the coordinates specified by thebackground-position.
If no background-position has been specified,
the image is placed at the element’s default left-top position (0,0).
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Buggy |
| 2.0 | Buggy | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | 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.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
