Log in Try the demo

Loading…

Dataset 20260827-2142-2f1b575 · measured 2026-08-27 21:42 UTC

background-position-y

✕renders differentlycss-backgrounds-4

The property takes effect, but our pixels are not Chrome's. The difference map on this page shows where.

What the specification says

Initial value: 0%
Applies to: all elements
Inherited: no
Percentages: refer to height of background positioning area minus height of background image
Computed value: A list, each item consisting of: an offset given as a computed <length-percentage> value, plus an origin keyword
Syntax: [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#

css-backgrounds-4 definition

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-y:bottom✕renders differently

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

12,194 pixels differ from Chrome, the largest by 255 of 255 on one channel.

Differing pixels: 12,194
Max channel delta: 255

the example page

background-position-y:center✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

background-position-y:50%✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

background-position-y:20px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

background-position-y:40%✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

background-position-y:4px✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

background-position-y:calc(40% + 20px)✕renders differently

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

3,408 pixels differ from Chrome, the largest by 255 of 255 on one channel.

Differing pixels: 3,408
Max channel delta: 255

the example page

background-position-y:calc(20px + 4px)✕renders differently

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

6,179 pixels differ from Chrome, the largest by 255 of 255 on one channel.

Differing pixels: 6,179
Max channel delta: 255

the example page

Which values were measured

“Supported” on one example means “supported at the value we tried”. The property’s declared grammar has 7 branches; 4 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
center	✓pixel-exact
top	not measured
bottom	✕renders differently
y-start	not measured
y-end	not measured
20px	✕renders differently
50%	✕renders differently

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