Widely available Well suited to decoration and atmospheric styling, but not a replacement for meaningful content images.

background-image

The background-image CSS property sets one or more background images on an element.

VisualBackgroundsImages

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
background-image
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

lineargradient

CSS lineargradient demo.

PreviewFullscreen

radialgradient

CSS radialgradient demo.

PreviewFullscreen

multi-layergradient

CSS multi-layergradient demo.

PreviewFullscreen

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