Export (0) Print
Expand All

backgroundRepeat property

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

CSS 2.1, Section 5.3.4

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 ToAll elements
Mediavisual
Inheritedno
Initial Valuerepeat

Standards information

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 IHTMLRuleStyle::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 IHTMLCurrentStyle::backgroundImage property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (IHTMLCurrentStyle::backgroundAttachment, IHTMLCSSStyleDeclaration::backgroundClip, IHTMLCSSStyleDeclaration::backgroundOrigin, IHTMLRuleStyle::backgroundPosition, IHTMLCurrentStyle::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.

Examples

This example uses different IHTMLCurrentStyle::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 IHTMLCurrentStyle::backgroundRepeat to different settings. The first row shows IHTMLCurrentStyle::backgroundRepeat set to repeat-x, repeat-y, and repeat, respectively. The second row shows IHTMLCurrentStyle::backgroundRepeat set to space, round, and no-repeat, respectively:

An image showing the effect of different background-repeat settings.

Requirements

Minimum supported client

Windows XP [desktop apps only]

Minimum supported server

Windows Server 2003 [desktop apps only]

Header

Mshtml.h

IDL

Mshtml.idl

DLL

Mshtml.dll

 

 

Show:
© 2014 Microsoft