The background Shorthand

In real codebases you will see one line that does the work of five. Learn to read and write the background shorthand without losing track of which value is which.

Step 1 of 3

One line, multiple jobs

The background shorthand combines several properties into a single declaration:

background: <color> <image> <repeat> <position> / <size> <attachment>;

You do not have to use every part — anything you skip falls back to its default. Common combos:

background: #f1f5f9; — just a colour.
background: url('hero.jpg') center / cover no-repeat; — image, centred, scaled to cover, not tiled.
background: linear-gradient(...) no-repeat; — a gradient that does not tile.

Tip

The slash / is what separates background-position from background-size. If you see center / cover, that means 'position: center; size: cover'. Without the slash, the browser does not know which is which.

Learn more on MDN

CSSMDN: background (shorthand)

HTMLREAD ONLY

PREVIEW