backgroundPosition property
Specifies the position of the background of the object.
.png){kind=icon} |
Syntax
Integer value = object.put_backgroundPosition( v);Integer value = object.get_backgroundPosition(* sPosition);
Property values
Type: BSTR
One or two of the values listed in Possible Values.
length
Floating-point number, followed by a supported length unit.
percentage
Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.
| Value | Meaning |
|---|---|
| 0% 0% |
vAlignment
Vertical alignment value.
| Value | Meaning |
|---|---|
| top | Vertical alignment is at the top. |
| center | Vertical alignment is centered. |
| bottom | Vertical alignment is at the bottom. |
hAlignment
Horizontal alignment value.
| Value | Meaning |
|---|---|
| left | Horizontal alignment is to the left. |
| center | Horizontal alignment is centered. |
| right | Horizontal alignment is to the right. |
String format
[[ percentage | length | left | center | right ][ percentage | length | top | center | bottom ]?]|[[ left | center | right ]||[ top | center | bottom ]]
CSS information
| Applies To | All elements |
| Media | visual |
| Inherited | no |
| Initial Value | 0% 0% |
Standards information
- CSS Backgrounds and Borders Module Level 3, Section 3.6
Remarks
If only one value is set, that value applies to the horizontal coordinate, and the vertical is set to "50%". If both values are set, the first value applies to the horizontal coordinate and the second value applies to the vertical.
Setting the values to "0% 0%" (initial value) positions the IHTMLCSSStyleDeclaration::backgroundImage to the upper left corner of the element's content block, which includes the padding.
Setting the background position using pixels positions the upper-left of the image at the specified x and y coordinates within the parent element. As the coordinates increase, the image moves to the right and down the visible area. By contrast, setting the background position with percentages uses a corresponding point on the image. At a position of "50% 50%" the image is effectively centered within the visible area.
This property can be set with the other background properties using the IHTMLCSSStyleDeclaration::background composite property.
Starting in Windows Internet Explorer 9, the background of an element 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 an element 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-position" as an alias for this property.
Examples
The following example shows how to use IHTMLCSSStyleDeclaration::backgroundPosition to specify different background position settings for three div objects.
<body>
<div class="circle"></div>
<div class="square"></div>
<div class="triangle"></div>
</body>
In the first div object, IHTMLCSSStyleDeclaration::backgroundPosition is set to 90% 50%. This represents a horizontal offset of 90% relative to the width of the object and a vertical offset of 50% relative to its height. In the second div object, the value for IHTMLCSSStyleDeclaration::backgroundPosition is left bottom, which is equivalent to 0% for the horizontal position and 100% for the vertical position. In the third div object, IHTMLCSSStyleDeclaration::backgroundPosition is set to 50px 50px, which sets the vertical and horizontal positions at 50 pixels.
.png)
div {
width: 150px;
height: 150px;
background-color: #D3D3D3;
}
.circle {
background-image:url(circle.png);
background-repeat: no-repeat;
background-position: 90% 50%;
}
.square {
background-image:url(square.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.triangle {
background-image:url(triangle.png);
background-repeat: no-repeat;
background-position: 50px 50px;
}
Requirements
Minimum supported client |
Windows XP |
Minimum supported server |
Windows Server 2003 |
Header |
Mshtml.h |
IDL |
Mshtml.idl |
DLL |
Mshtml.dll |