Loading…
Dataset 20260827-2142-2f1b575 · measured 2026-08-27 21:42 UTC
background-position
✓pixel-exactcss-backgrounds-4
Our rendering of the example is identical to Chrome's, pixel for pixel — no further apart than the example's own noise floor.
What the specification says
- Initial value
- 0% 0%
- Applies to
- all elements
- Inherited
- no
- Percentages
- refer to size of background positioning area minus size of background image; see text
- Computed value
- a list, each item a pair of offsets (horizontal and vertical) from the top left origin, each offset given as a computed <length-percentage> value
- Syntax
- <bg-position>#
The measurements
Each example is one declaration on a small page, drawn by Chrome and by our engine. Drag the handle to wipe between them.
background-position:right✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:bottom✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:right top✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:left bottom✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:right 20px top 20px✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:center✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:50%✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:center center✓pixel-exactOur renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:20px✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:top✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:center top✓pixel-exactOur renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
background-position:50% top✓pixel-exact
Our renderChromeIdentical to Chrome: nothing differs, so there is no difference map to show.
- Differing pixels
- 0
- Max channel delta
- 0
Which values were measured
“Supported” on one example means “supported at the value we tried”. The property’s declared grammar has 63 branches; 12 of them carry a measurement. The publishing ceiling is 12 examples per property — a branch past it is left out by our choice, not by accident.
| Value | Measured |
|---|---|
| left | not measured |
| center | ✓pixel-exact |
| right | ✓pixel-exact |
| top | ✓pixel-exact |
| bottom | ✓pixel-exact |
| x-start | not measured |
| x-end | not measured |
| y-start | not measured |
| y-end | not measured |
| block-start | not measured |
| block-end | not measured |
| inline-start | not measured |
| inline-end | not measured |
| 20px | ✓pixel-exact |
| 50% | ✓pixel-exact |
| left top | not measured |
| center top | ✓pixel-exact |
| right top | ✓pixel-exact |
| x-start top | not measured |
| x-end top | not measured |
| left center | not measured |
| left bottom | ✓pixel-exact |
| left y-start | not measured |
| left y-end | not measured |
| 20px top | not measured |
| 50% top | ✓pixel-exact |
| left 20px | not measured |
| left 50% | not measured |
| block-start inline-start | not measured |
| center inline-start | not measured |
| block-end inline-start | not measured |
| block-start center | not measured |
| block-start inline-end | not measured |
| start start | not measured |
| center center | ✓pixel-exact |
| end end | not measured |
| left 20px top 20px | not measured |
| right 20px top 20px | ✓pixel-exact |
| x-start 20px top 20px | not measured |
| x-end 20px top 20px | not measured |
| left 50% top 20px | not measured |
| left 20px bottom 20px | not measured |
| left 20px y-start 20px | not measured |
| left 20px y-end 20px | not measured |
| left 20px top 50% | not measured |
| block-start 20px inline-start 20px | not measured |
| block-end 20px inline-start 20px | not measured |
| block-start 50% inline-start 20px | not measured |
| block-start 20px inline-end 20px | not measured |
| block-start 20px inline-start 50% | not measured |
| start 20px start 20px | not measured |
| end 20px end 20px | not measured |
| start 50% start 50% | not measured |
| left top 20px | not measured |
| center top 20px | not measured |
| right top 20px | not measured |
| left bottom 20px | not measured |
| left top 50% | not measured |
| left 20px top | not measured |
| right 20px top | not measured |
| left 50% top | not measured |
| left 20px center | not measured |
| left 20px bottom | not measured |
Measured against Chrome 148.0.7778.96 on 2026-08-27, with up to 40 candidate values tried per property. All properties · How the measurement works