CSS 'background-position-x' Property Explained

The CSS 'background-position-x' property specifies the horizontal position of a background image within an element. It allows for precise control over the x-coordinate (left to right) placement of the background image, enabling designers to align background images more effectively within the horizontal plane of an element.

CSS 'background-position-x' Property Examples

See the Pen CSS 'background-position-x' Property by Webzstore (@webzstore) on CodePen.

The 'background-position-x' property provides detailed control over the placement of background images, allowing for flexible and precise design options in web development. This property is essential for achieving specific visual layouts and ensuring that background images are perfectly aligned with a web page's content and design intentions.

Browser Support For 'background-position-x' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-position-x for the full compatibility details, including mobile browsers.

CSS Syntax of the 'background-position-x' Property

background-position-x: [ center | [ left | right ]? <length-percentage>? ]#;

background-position-x: center;       /* horizontally centred */
background-position-x: 25%;          /* 25% of the free horizontal space */
background-position-x: right 20px;   /* 20px in from the right edge (a side-relative value: see the second table above) */
background-position-x: 0, 100%;      /* two backgrounds, comma-separated */

Usage of the 'background-position-x' Property

Use 'background-position-x' when adjusting the horizontal alignment of an element's background image without affecting its vertical position. This is particularly useful for aligning background images to the left, center, or right of an element or for placing them at specific horizontal positions using units like pixels or percentages.

Property Values of the 'background-position-x' Property

• Value: Specifies the horizontal position of the background image. It can be defined using keywords (left, center, right), percentages (e.g., 50%), or exact measurements (e.g., 100px). A keyword can be combined with an offset from that edge, such as right 20px; these side-relative values are tracked separately from the basic property, and the second compatibility table above shows when each browser supports them, so check it before relying on that syntax. Percentages refer to the width of the background positioning area minus the width of the image, so 0% aligns the image's left edge with the area's left edge, 100% aligns the right edges, and 50% centers it. The positioning area is the padding box unless background-origin says otherwise.
• Initial: Resets the 'background-position-x' to its default value (0%), which places the background image at the left edge of the background positioning area.
• Inherit: The element inherits the 'background-position-x' value from its parent element.