Multi-layer backgrounds

1 — two url() layers (redhat.com language switcher)

Globe on the left, caret on the right. Before layers landed only the globe appeared; before the CSS3 shorthand fix, neither did.

2 — gradient border

padding-box fill over a border-box gradient

3 — three overlapping layers, paint order

Three globes 28px apart, each 44px wide, so they overlap: the leftmost is layer 0 and must be drawn over the two to its right.

Gradient layers stack but do not composite — each is pre-blended against the box's background colour, not against the layer underneath — so translucent gradient stacks still read wrong. radial-gradient() remains one flattened wash whatever the layer count.

4 — background-image list, shared repeat/position

Caret over globe, both centred: the single-valued background-repeat and background-position apply to both layers. A comma list on those longhands is not carried per layer — only background and background-image split into layers.