10 out of 21 rated this helpful - Rate this topic

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

Applies To	All elements
Media	visual
Inherited	no
Initial Value	repeat

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.

Examples

The following example uses the repeat-y keyword to tile an image vertically.

CSS


body {
  background: lightgray url("fencing.png");
  background-repeat: repeat-y;
  background-position: center;
}

The following example uses the space keyword to tile an image so that it covers the entire body element, with each image equally spaced from one another.

CSS


body {
  background-image: url(greendot.png) lightgray;
  background-repeat: space
}

The following examples use the background-repeat CSS property and the backgroundRepeat scripting property to specify whether the background image is tiled.

This example uses a call to an embedded (global) style sheet to tile the image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/background-repeat.htm

HTML


<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>MyBackgroundRepeat</title>
<style>
.style1 {
  background-image: url(sphere.jpg);
  background-repeat: repeat;
}
.style2 {
  background-image: url(sphere.jpeg);
  background-repeat: no-repeat;
}
</style>
</head>

<body>

<span onmouseover="this.className='style1'" 
  onmouseout="this.className='style2'" onclick="this.className=''">
. . . </span>

</body>

</html>

This example shows how to use inline scripting to tile the image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/backgroundRepeat.htm

HTML


<span onmouseover="this.style.backgroundImage='url(sphere.jpeg)';
this.style.backgroundRepeat='repeat'">...</span>

Community Additions

ADD

background-repeat property

Syntax

Property values

Property values

CSS information

Standards information

Remarks

Examples

See also

Community Additions