background-image
background-image paints one or more images behind an element. It is useful for decorative assets, layered effects, and non-content imagery.
Overview
background-image paints one or more images behind an element. It is useful for decorative assets, layered effects, and non-content imagery.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
multiple backgrounds Multiple backgrounds | 1 | 12 | 3.6 | 1.3 | 18 | 1 |
none | 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)
Notes 1 item(s)
Implementation note
- If the `browser.display.use_document_colors` user preference in `about:config` is set to `false`, background images will not be displayed.
Syntax
CSS
.hero {
background-image:
linear-gradient(to bottom, transparent, #000),
url('hero-bg.jpg');
}Live demo
Use cases
Decorative surfaces
Add texture, patterns, or hero artwork without changing the document structure.
Layered effects
Combine gradients and images for richer backgrounds in banners or cards.
Cautions
- Background images are not announced like content images, so meaningful visuals should usually use img or picture instead.
- Large assets can still hurt performance if they are not compressed or sized carefully.
Accessibility
- Do not place essential text inside background images unless the information is fully available elsewhere.
Related links
Powered by web-features