background
The background shorthand combines color, image, position, size, repeat, and attachment settings into one declaration. It is useful for keeping related surface styling together.
Overview
The background shorthand combines color, image, position, size, repeat, and attachment settings into one declaration. It is useful for keeping related surface styling together.
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.
Related links
Powered by web-features