Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

backgroundPositionX property

Specifies the x-coordinate of the IHTMLRuleStyle::backgroundPosition property.

Syntax

Integer value = object.put_backgroundPositionX(Variant v);Integer value = object.get_backgroundPositionX(Variant* iPositionX);

Property values

Type: VARIANT

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 of the object.

ValueMeaning
0%

 

left

Horizontal alignment is to the left.

center

Horizontal alignment is centered.

right

Horizontal alignment is to the right.

String format

<length> | <percentage> | left | center | right

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value0%

Remarks

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

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

Examples

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

Three div objects demonstrate different background-position-x settings.


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



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


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

See also

IHTMLCurrentStyle::backgroundPositionY
IHTMLRuleStyle::backgroundPosition

 

 

Community Additions

ADD
Show:
© 2015 Microsoft