background
The background shorthand CSS property sets all background style properties at once, such as color, image, origin, size, and repeat method.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
local | 1 | 12 | 1 | 1 | 18 | 1 |
multiple backgrounds Multiple backgrounds | 1 | 12 | 3.6 | 1.3 | 18 | 1 |
no-repeat | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
repeat | 1 | 12 | 1 | 1 | 18 | 1 |
repeat-x | 1 | 12 | 1 | 1 | 18 | 1 |
repeat-y | 1 | 12 | 1 | 1 | 18 | 1 |
round | 1 | 12 | 1 | 1 | 18 | 1 |
scroll | 1 | 12 | 1 | 1 | 18 | 1 |
space | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('hero.jpg') center/cover no-repeat;
}Live demo
Use cases
-
Surface styling
Define card, panel, and section backgrounds with one compact rule when the combination is straightforward.
-
Decorative layers
Apply background color and image together for hero sections, banners, or highlight areas.
Cautions
- Dense shorthand declarations can become hard to read when many background layers are involved.
- Changing one part of the shorthand later can accidentally reset other background values.
Accessibility
- Decorative backgrounds should never reduce text contrast or become the only source of important information.