HTML & CSS

background-repeat (CSS property)

    Adam Roberts
    Share

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