CSS background-position-x Property

The background-position-x property defines the horizontal starting coordinate of a background image within its container.

selector { background-position-x: value; }

left	Aligns the background image to the left edge of the container.
center	Aligns the background image to the horizontal center of the container.
right	Aligns the background image to the right edge of the container.
<percentage>	Sets the horizontal position relative to the container width, where 0% is the left edge and 100% is the right edge.
<length>	Sets the horizontal position using specific units like px, em, or rem from the left edge.

Code Examples

This basic example demonstrates how to anchor a background image to the right edge of a container using a keyword.

<div style="width: 100%; height: 200px; background-image: url('landscape.jpg'); background-repeat: no-repeat; background-position-x: right; border: 5px solid #333333;"></div>

This advanced example uses JavaScript to update the horizontal background position dynamically based on mouse movement to create a subtle interactive effect.

<div id="hero" style="width: 100%; height: 400px; background-image: url('sky.jpg'); background-position-x: 0px; background-position-y: center; border: 1px solid #000000;"></div>
<script>
window.addEventListener("mousemove", (e) => {
    const hero = document.getElementById("hero");
    let val = e.clientX / 10;
    hero.style.backgroundPositionX = val + "px";
    hero.style.borderColor = "#00ff00";
});
</script>

Pro Tip

You can use the calc() function to create complex offsets, such as background-position-x: calc(100% - 20px);. This is great for anchoring an image to the right side while maintaining a specific margin, making your designs much more resilient to fluid container widths.

Deep Dive

Think of this property like a slide in a projector that you can only move side-to-side. While the standard background-position property handles both X and Y coordinates at once, background-position-x allows you to isolate and manipulate only the horizontal axis. This is particularly useful when you have a background image that needs to stay vertically fixed while shifting left or right based on user interaction or screen size. You can use keyword values, specific lengths, or percentages. When using percentages, the calculation is a bit unique: a value of 50% means the 50% point of the image is aligned with the 50% point of the container, effectively centering it horizontally.

Best Practices

Use this longhand property when you only need to update the horizontal placement of a background image. This keeps your CSS cleaner and prevents you from accidentally overwriting the vertical position (background-position-y) that might be defined elsewhere. It is also the preferred way to handle horizontal-only animations, as it makes the intent of the code clear to other developers.

Common Pitfalls

The most common mistake is the order of operations in your CSS. If you define background-position-x and then follow it with the shorthand background property, the shorthand will overwrite your specific horizontal setting. Always place your specific axis properties after any shorthand background declarations. Also, remember that some older browsers required the full background-position syntax, though modern support is now universal.

Accessibility

Ensure that shifting the background image does not cause text to become unreadable. If the image moves behind text content, the contrast ratio between the text and the new section of the image must remain high enough for visually impaired users. Always test your layout with the image at both extremes of its horizontal movement.

Dev Data Table: background-position-x property

default	0%
animatable	yes
inherited	no
experimental	no
year_intro	2011
year_standard	2018
js_syntax_1	element.style.backgroundPositionX = "50%";
js_syntax_2	element.style.setProperty("background-position-x", "right");
js_note	When targeting this property in JavaScript, use camelCase for the style object or the kebab-case string inside the setProperty method.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 49, "Safari": 1, "Opera": 15, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 14 }