This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

CSS Object Model Property
:

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, or pc) or a relative units designator (em, ex, or px). 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

Related pages

Attributions

  • Microsoft Developer Network: [[1] Article]