background-position-x
Specifically controls the horizontal (left-to-right) position of a background image. This is useful when you want to change only the horizontal position via hover or animation without touching the vertical position.
Quick example
.banner {
background-image: url('pattern.png');
/* Precisely moves the pattern 50px from the left */
background-position-x: 50px;
}Quick facts
Initial value
0%Inherited
No
Applies to
all elements
Animation type
repeatableList
Values
centerleftrightx-startx-end background-position-x Browser Support
Widely available Since 2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
1+
49+
1+
12+