backgroundRepeat property

Article
05/02/2017

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

Syntax

Integer value = object.put_backgroundRepeat( v);Integer value = object.get_backgroundRepeat(* sRepeat);

Property values

Type: BSTR

repeat (repeat)

Default. Image is repeated horizontally and vertically.

repeat-x (repeat-x)

Image is repeated horizontally.

repeat-y (repeat-y)

Image is repeated vertically.

inherit

no-repeat (no-repeat)

Image is not repeated.

String format

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

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 IHTMLCSSStyleDeclaration::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 IHTMLCSSStyleDeclaration::backgroundImage property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (IHTMLCSSStyleDeclaration::backgroundAttachment, IHTMLCSSStyleDeclaration::backgroundClip, IHTMLCSSStyleDeclaration::backgroundOrigin, IHTMLCSSStyleDeclaration::backgroundPosition, IHTMLCSSStyleDeclaration::backgroundRepeat, and IHTMLCSSStyleDeclaration::backgroundSize). 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 IHTMLCSSStyleDeclaration::backgroundImage property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (IHTMLCSSStyleDeclaration::backgroundAttachment, IHTMLCSSStyleDeclaration::backgroundClip, IHTMLCSSStyleDeclaration::backgroundOrigin, IHTMLCSSStyleDeclaration::backgroundPosition, IHTMLCSSStyleDeclaration::backgroundRepeat, and IHTMLCSSStyleDeclaration::backgroundSize). 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 IHTMLCSSStyleDeclaration::backgroundRepeat 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 IHTMLCSSStyleDeclaration::backgroundRepeat to different settings. The first row shows IHTMLCSSStyleDeclaration::backgroundRepeat set to repeat-x, repeat-y, and repeat, respectively. The second row shows IHTMLCSSStyleDeclaration::backgroundRepeat set to space, round, and no-repeat, respectively:

Requirements

Minimum supported client	Windows XP
Minimum supported server	Windows Server 2003
Header	Mshtml.h
IDL	Mshtml.idl
DLL	Mshtml.dll

Share via