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-positionfor 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 andbackground-positionthen 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-positionproperty.
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.
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.
