Sets the horizontal position of a background image.
- Initial value
- Applies to
- All elements
- Computed value
- as specified
- Floating-point number, followed by an absolute units designator (
pc) or a relative units designator (
px). For more information about the supported length units, see CSS Values and Units Reference.
- Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.
- Horizontal alignment value (e.g. "left", "right", or “center”).
Moving the background image to the right by 50px.
Moving the background image to the left by 50px.
Moving the background image to the right by half the width of its element.
Moving the background image to the left by half the width of its element.
Centering a background image inside its element.
- 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.
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.
background-position-x: length | percentage | hAlignment
There are no standards that apply here.
Microsoft Developer Network: [ Article]