background-position
The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| Other | ||||||
| The background-position-x CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by background-origin. | 1 | 12 | 49 | 1 | 18 | 1 |
| CSS property | ||||||
side-relative values Side-relative values (such as `left 10%`) | 144 | 144 | 49 | 15.4 | 144 | 15.4 |
| Other | ||||||
| The background-position-y CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by background-origin. | 1 | 12 | 49 | 1 | 18 | 1 |
| CSS property | ||||||
side-relative values Side-relative values (such as `bottom 10%`) | 144 | 144 | 49 | 15.4 | 144 | 15.4 |
bottom | 1 | 79 | 1 | 1 | 18 | 1 |
center | 1 | 79 | 1 | 1 | 18 | 1 |
left | 1 | 79 | 1 | 1 | 18 | 1 |
multiple backgrounds Multiple backgrounds | 1 | 12 | 3.6 | 1.3 | 18 | 1 |
right | 1 | 79 | 1 | 1 | 18 | 1 |
side-relative values Side-relative values (such as `bottom 10% right 20%`) | 25 | 12 | 13 | 7 | 25 | 7 |
top | 1 | 79 | 1 | 1 | 18 | 1 |
- This feature was removed in a later browser version (79)
- This feature was removed in a later browser version (79)
Syntax
.hero {
background-position: center top;
}
.sprite {
background-position: -32px -64px;
}Live demo
Use cases
-
Hero image focal points
Keep the most important part of a decorative background visible across varying container sizes.
-
Pattern alignment
Place icons, textures, or repeated motifs consistently inside reusable components.
Cautions
- Positioning alone cannot solve poor crop choices if the underlying asset does not suit the component ratio.
- Responsive layouts may still need alternate assets rather than one heavily repositioned image.
Accessibility
- If a decorative image supports the page mood, ensure it never interferes with reading or focus visibility.