background
The background shorthand sets color, image, position, size, repeat, and attachment in one declaration.
Syntax
background: <color> <image> <position> / <size> <repeat>;
Examples
.hero {
background: linear-gradient(180deg, #0000, #000) center / cover no-repeat,
url('/hero.jpg') center / cover;
}
Output
Renders a hero image covered by a top-to-bottom darkening gradient overlay.
Notes
Multiple layers are comma-separated with the first listed on top. The shorthand resets all background sub-properties not specified. Use the / separator between position and size.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |