Export (0) Print
Expand All
6 out of 10 rated this helpful - Rate this topic

background-position-x property

Specifies the x-coordinate of the background-position property.

Syntax

background-position-x: <length> | <percentage> | left | center | right

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

left

Horizontal alignment is to the left.

center

Horizontal alignment is centered.

right

Horizontal alignment is to the right.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value0%

Remarks

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

Examples

The following example shows the result of different background-position-x settings for each of the three div objects. The first div object sets background-position-x to 90%. This represents a horizontal offset of 90% relative to the width of the background positioning area. The second div object sets background-position-x to 20 pixels and sets the horizontal offset on the x-coordinate to 20 pixels. The third div object sets the value for background-position-x 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;
}


See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
background-position-y
background-position

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.