CSS property: background-repeat

Description

Background repeat type.

Specifies how background images are tiled after they have been sized and positioned.

Syntax

background-repeat: <repeat> [ , <repeat> ]*;

Values

<repeat>

repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

If a value has two keywords, the first one is for the horizontal direction, the second for the vertical one, as follows:

repeat-xEquivalent to repeat no-repeat.
repeat-yEquivalent to no-repeat repeat.
repeatThe image is repeated in this direction as often as needed to cover the background painting area.
spaceThe image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area. The value of background-position for this direction is ignored, unless 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 determines its position in this direction.
roundThe 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 so that it does. See the formula under background-size. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.
no-repeatThe image is placed once and not repeated in this direction.

Versions

Examples

p {
    background-image: url("image.png");
    background-repeat: no-repeat;
}
p {
    background-repeat: repeat;
}
p {
    background-repeat: repeat-x;
}
p {
    background-repeat: repeat-y;
}