background-position
background-position controls where a background image is placed inside its box. It helps keep decorative imagery aligned with the part of the UI users should see.
Overview
background-position controls where a background image is placed inside its box. It helps keep decorative imagery aligned with the part of the UI users should see.
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.
Related links
Powered by web-features