backgroundPositionY property

Article
05/02/2017

Specifies the y-coordinate of the IHTMLCSSStyleDeclaration::backgroundPosition property.

Syntax

Integer value = object.put_backgroundPositionY(Variant v);Integer value = object.get_backgroundPositionY(Variant* iPositionY);

Property values

Type: VARIANT

length (length)

Floating-point number, followed by a supported length unit.

percentage (percentage)

Integer, followed by a percent sign (%). The value is a percentage of the height of the object.

Value	Meaning
0%

vAlignment (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.

String format

<length> | <percentage> | top | center | bottom

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	0%

Standards information

There are no standards that apply here.

Remarks

Starting in Windows Internet Explorer 8, the IHTMLCSSStyleDeclaration::backgroundPositionY property is an extension to Cascading Style Sheets (CSS), and can be used as a synonym for background-position-y in IE8 Standards mode.

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

Examples

The following example shows the result of different IHTMLCSSStyleDeclaration::backgroundPositionY settings for each of the three div objects. The first div object sets IHTMLCSSStyleDeclaration::backgroundPositionY to 90%. This represents a vertical offset of 90% relative to the width of the background positioning area. The second div object sets IHTMLCSSStyleDeclaration::backgroundPositionY to 20 pixels and sets the vertical offset on the x-coordinate to 20 pixels. The third div object sets IHTMLCSSStyleDeclaration::backgroundPositionY to center. This is equivalent to a vertical offset of 50%.

<body>
   <div class="circle"></div>
   <div class="square"></div>
   <div class="triangle"></div>
</body>

div {
   width: 70px;
   height: 200px;
   background-color: #D3D3D3;
}
.circle {
   background-image:url(circle.png);
   background-repeat: no-repeat;
   background-position-y: 90%;
}
.square {
   background-image:url(square.png);
   background-repeat: no-repeat;
   background-position-y: 20px;
}
.triangle {
   background-image:url(triangle.png);
   background-repeat: no-repeat;
   background-position-y: center;
}

Requirements

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

Share via