v144 · css

side-relative syntax for background-position-x/y longhands

Defines the background image's position relative to one of its edges.

concepts

  1. Side-relative Syntax

    The longhand background-position-x and -y now accept the same `<side> <offset>` syntax the shorthand has had for years. No more workarounds.

  2. Longhand Builder

    Pick an edge and offset for each axis, watch the preview and the generated CSS update live. Useful for animating one axis without touching the other.

  3. Parallax Recipe

    Three layers, each pinned to the bottom edge with the new longhand and scrubbing X at a different speed. The exact pattern that needed a shorthand-only declaration pre-144.

  4. Animation Demo

    Three CSS animations — horizontal sweep, diagonal parallax, and a Y-axis bounce — each animating only one axis via the longhand while the other stays side-relative pinned. Play/pause per example with live CSS source.

why it shipped

One important motivation is interoperability, given that Chrome is the only browser that lacks this syntax for the background-position-x/y longhands.

references