demo · v144

Longhand Builder

Pick an edge and offset for each axis. The preview updates live. The longhand syntax is exactly what makes it possible to animate one axis without writing a full shorthand each frame.

background-position-x

background-position-y

background-position-x: left 20px; background-position-y: top 20px;

why it matters

Before v144, anchoring an image relative to a specific edge required the shorthand background-position: right 20px bottom 8px. To animate only the Y axis you had to rewrite the whole thing every frame, which means you can't run a CSS transition on one axis without disturbing the other. With longhand support, background-position-y is a standalone animatable property — same trick the shorthand has had since CSS2.1.

see also