background-position
Sets the initial position of a background image. You can use keywords (center, top), percentages, or length values to move the image within its container.
Quick example
.hero {
background-image: url('banner.jpg');
background-position: center bottom;
/* keeps the bottom of the image visible even if the container scales */
}Quick facts
Initial value
0% 0%Inherited
No
Applies to
all elements
Animation type
repeatableList
background-position 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+
1+
1+
12+