background-repeat property

Specifies whether and how the background image (or images) is tiled.

Syntax

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

Property values

Single values have the following meanings:

repeat-x

Image is repeated horizontally. Equivalent to "repeat no-repeat".

repeat-y

Image is repeated vertically. Equivalent to "no-repeat repeat".

repeat

Initial value. Image is repeated horizontally and vertically. Equivalent to "repeat repeat".

space

Equivalent to "space space".

round

Equivalent to "round round".

no-repeat

Image is not repeated. Equivalent to "no-repeat no-repeat".

Property values

If two keywords are specified, the first one is for the horizontal direction, and the second one is for the vertical direction, as follows:

repeat

The image is repeated in this direction as often as needed to cover the background painting area.

space

The 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 the background-position property 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.

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 so that it does. See the formula in remarks for the background-size property. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.

no-repeat

The image is placed once and not repeated in this direction.

CSS information

Standards information

• CSS 2.1, Section 5.3.4

Remarks

The repeat-x and repeat-y values make the image repeat horizontally and vertically, respectively, creating a single band of images from one end to the other.

This property can be set with other background properties by using the background composite property.

In Windows Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

The background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-background-repeat" as an alias for this property.

Examples

This example uses different background-repeat settings to display a circle image in different ways.

div {
  width: 150px;
  height: 150px;
  float: left;
  margin-right: 10px;
  margin-top: 10px;
}
.circle-repeat-x {
  background-color: aqua;
  background-image: url(circle.png);
  background-repeat: repeat-x;
  background-position: 50% 50%;
}
.circle-repeat-y {
  background-color: aqua;
  background-image: url(circle.png);
  background-repeat: repeat-y;
  background-position: 50% 50%;
}
.circle-repeat {
  background-color: aqua;
  background-image: url(circle.png);
  background-repeat: repeat;
  background-position: 50% 50%;
}    
.circle-space {
  background-color: aqua;
  background-image: url(circle.png);
  background-repeat: space;
  background-position: 50% 50%;
}
.circle-round {
  background-color: aqua;
  background-image: url(circle.png);
  background-repeat: round;
  background-position: 50% 50%;
}
.circle-no-repeat {
  background-color: aqua;
  background-image: url(circle.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<body>
  <div class="circle-repeat-x"></div>
  <div class="circle-repeat-y"></div>
  <div class="circle-repeat"></div>
  <div class="circle-space"></div>
  <div class="circle-round"></div>
  <div class="circle-no-repeat"></div>
</body>

The following image shows the result of setting background-repeat to different settings. The first row shows background-repeat set to repeat-x, repeat-y, and repeat, respectively. The second row shows background-repeat set to space, round, and no-repeat, respectively:

See also

CSSStyleDeclaration

currentStyle

defaults

runtimeStyle

style