CSS Reference Property

background-repeat

If a background image is specified, the background-repeat property defines whether the image is repeated (tiled), and how. Repeating a background image happens after it has been sized and positioned.

An image can be repeated vertically, horizontally, both vertically and horizontally, or it can be set not to repeat at all.

If a background image is repeated, it may happen that some of its tiles get clipped if they don’t fit a whole number of times into the background positioning area of the element. Prior to CSS3, there was nothing a developer could do to prevent that. But in the backgrounds and borders module level 3, two new values have been introduced that allow developers to prevent the image clipping by either rescaling that image so that it fits a whole number of times, or repeating the image as often as it will fit within the area without being clipped, and then spacing the images out to fill the area.

The property can take either a single value or two keyword values. The values specify whether and how the image is repeated horizontally and vertically.

If one single value is used, the value is considered a shorthand for the two-value syntax and the other value is set by the browser (see the Values section below for details). If two keyword values are used, then the first one is for the horizontal direction and the second one for the vertical direction.

The background-repeat property can also take comma-separated values so that when the element has more than one background image, each value is applied to a corresponding background image (first value for the first image, second value for the second image, and so on).

Trivia & Notes

All tiling covers the content, padding and border areas of a box. The border set on an element usually stacks on top of the background images of the element.

Official Syntax

  • Syntax:

    background-repeat: <repeat-style> [ , <repeat-style> ]*
    
    /* where */
    
    <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
                           
  • Initial: repeat
  • Applies To: all elements
  • Animatable: no

Values

When using only one value, they mean the following:

repeat-x
Computes to repeat no-repeat. The background image is repeated horizontally but not vertically.
repeat-y
Computes to no-repeat repeat. The background image is repeated vertically but not horizontally.
repeat
Computes to repeat repeat. The background image is repeated both horizontally and vertically. This is the default value.
space
Computes to space space. Spacing is added between repeated images on the horizontal axis as well as on the vertical axis.
round
Computes to round round.
no-repeat
Computes to no-repeat no-repeat. The background image is not repeated at all.

When two keywords are used (horizontal and vertical) it means the following:

repeat
The image is repeated in the specified direction as often as needed to cover the background painting area. If the image does not fit a whole number of times in the element, the last image may get clipped.
space
The image is repeated as often as will fit within the background positioning area without being clipped. And then the remaining space in the specified direction is distributed between the images that are spaced out to fill the area. The first and last images touch the edges of the area. The value of background-position for this direction is ignored, unless the image is bigger than the background area and there is not enough space for two copies of the image in this direction, in which case only one image is placed and background-position then determines its position in this direction.
round
The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled in the specified direction so that it does.
no-repeat
The image is not repeated in the specified direction. It is only drawn once onto the background positioning area. The position of the background in that area (where it should appear) is specified by the background-position property.

Examples

The following example will repeat an image only vertically, at the center of an element (forming like a vertical column at the center). First, the image is positioned at the center using the background-position property, and then it is set to repeat vertically using repeat-y, so it is repeated above and below the center position.

.element {
    background-image: url(some/image.png);
    background-position: center center;
    background-repeat: repeat-y;
}
                

The following example will repeat the first image horizontally, and will not repeat the second image.

.element {
    background-image: url(url/to/first/image.png), url(url/to/second/image.png);
    background-repeat: repeat-x, no-repeat;
}
                

The following image shows the effect of space on repeating the background image on an element.

bg-space
The effect of ‘space’: the image of a dot is tiled to cover the whole background and the images are equally spaced. No image is being clipped.

Live Demo

The following live demos shows some examples:

View this demo on the Codrops Playground

Browser Support

The background-repeat property is supported in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Notes

The round and space keywords are currently only supported in IE 9+ and Opera 10.5+ and Chrome.

Written by

Last updated February 3, 2015 at 12:35 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.