background-position-x
Summary
Sets the horizontal position of a background image.
Overview table
- Initial value
0%
- Applies to
- All elements
- Inherited
- No
- Media
- visual
- Computed value
- as specified
- Animatable
- No
Syntax
background-position-x: hAlignment
background-position-x: length
background-position-x: percentage
Values
- length
- Floating-point number, followed by an absolute units designator (
cm
,mm
,in
,pt
, orpc
) or a relative units designator (em
,ex
, orpx
). For more information about the supported length units, see CSS Values and Units Reference. - percentage
- Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.
- hAlignment
- Horizontal alignment value (e.g. "left", "right", or “center”).
Examples
Moving the background image to the right by 50px.
background-position-x: 50px;
Moving the background image to the left by 50px.
background-position-x: -50px;
Moving the background image to the right by half the width of its element.
background-position-x: 50%;
Moving the background image to the left by half the width of its element.
background-position-x: -50%;
Centering a background image inside its element.
background-position-x: center;
Usage
===Usage===
- Often used to manipulate sprites (i.e. a technique of using CSS to expose small portions of a single background image, which is composed of multiple smaller images, such that HTTP requests are reduced).
- If browser support is of utmost importance, use background-position instead.
Notes
Remarks
Windows Internet Explorer 8. The -ms-background-position-x attribute is an extension to CSS, and can be used as a synonym for background-position-x in IE8 Standards mode.
Although background-position-x is currently non-standard, Jonathan Snook provides a case for its inclusion regarding right-to-left languages, such as Arabic or Hebrew. When using sprites, developers would be able to accomodate LTR and RTL environments with a single line of code by including the background-position-x property, rather than redeclaring every single sprite’s position in their stylesheet. Read his blog entry on this and the background-position-y property.
Syntax
background-position-x: length | percentage | hAlignment
Standards information
There are no standards that apply here.
Related specifications
[ ]
:
See also
Related articles
Background
background-position-x
Related pages
- CSSStyleDeclarationCSSStyleDeclaration
- currentStylecurrentStyle
- defaultsdefaults
- runtimeStyleruntimeStyle
- stylestyle
- background-position-ybackground-position-y
Attributions
Microsoft Developer Network: [[1] Article]