CSS background-position & background-size Test Page

Each box is 60px tall with a light gray fill; the red dot is a 20x20 background-image whose placement/size is what's under test.

1 — background-position: Keywords

top left
background-position: top left
top right
background-position: top right
bottom left
background-position: bottom left
bottom right
background-position: bottom right

2 — background-position: Center & Reversed Keyword Order

center
background-position: center
bottom center
background-position: bottom center
center right (reversed)
background-position: center right
right (single keyword)
background-position: right (Y implied center)

3 — background-position: Percentages & Lengths

25% 75%
background-position: 25% 75% (not centered)
10px 10px
background-position: 10px 10px
calc(50% - 10px) center
background-position: calc(50% - 10px) center
0 0 (top left)
background-position: 0 0

4 — background-position: 4-Value Edge Offset Syntax

right 10px bottom 10px
background-position: right 10px bottom 10px
right 20px top
background-position: right 20px top
left bottom 20px
background-position: left bottom 20px
bottom 5px right 5px
background-position: bottom 5px right 5px

5 — background-size: cover / contain / auto (no intrinsic ratio)

Gradients are "generated images" with no intrinsic size or ratio, so per spec cover/contain/auto all resolve identically to 100% 100% (full box) - contrasted here with an explicit stretched size.

cover (= full box)
background-size: cover
contain (= full box)
background-size: contain
auto (= full box)
background-size: auto
100% 100% (same result)
background-size: 100% 100%

6 — background-size: Explicit Lengths & Percentages

40px 40px
background-size: 40px 40px
50% 50%
background-size: 50% 50%
20px (width only, height fills box)
background-size: 20px (no ratio - height defaults to full box)
gradient background-size, tiled
gradient background-size: 50% (tiles)

7 — Multi-Layer background-position / background-size

Comma-separated background-position/background-size values cycle per background-image layer, same as background-image itself.

2 dots, different corners
background-position: top left, bottom right
2 dots, different sizes
background-size: 40px 40px, 15px 15px (cycled per layer)
3 layers cycling 2 positions
3 layers, position cycles: top left, bottom right, top left

8 — SVG background-image

A url() background-image source can now be an SVG - rendered as real vector content (a reusable Form XObject tile), not rasterized, exactly like <img src="x.svg"> already was.

basic (auto = SVG's own viewBox size)
background-image: url(x.svg) (no background-size)
background-size: cover
background-size: cover (uses the SVG's 1:1 intrinsic ratio)
background-size: contain
background-size: contain
background-repeat: repeat (tiled)
background-repeat: repeat (one vector tile, reused per copy)