RetroSearch Browse

Showing content from https://webplatform.github.io/docs/css/properties/background-position-x below:

background-position-x Summary

Sets the horizontal position of a background image.

Overview table

Syntax

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

[ ]
: