background-image

background-image supplies one or more CSS image layers. The first listed layer is nearest the viewer; the background color paints below them. Images do not reserve a box’s height by themselves.

Draw a gradient without a network request

The box has an explicit minimum height so the gradient has an area to fill. Gradients are CSS images, even though they do not load a file.

<div class="sample" aria-hidden="true"></div>
<p>A decorative gradient image.</p>

.sample {
  min-height: 120px;
  background-image: linear-gradient(90deg, #2563eb, #0f766e);
  background-color: #eff6ff;
}

Combine two independent image layers

The radial highlight is first, so it paints above the linear gradient. Removing that first layer leaves the gradient intact. The note’s white surface keeps text readable.

<div class="note"><p>Two images form this decorative background.</p></div>

.note {
  min-height: 140px;
  padding: 1rem;
  background-color: #eff6ff;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 65%), transparent 40%),
    linear-gradient(90deg, #2563eb, #0f766e);
}
p {
  background: white;
  color: #172554;
  padding: 0.75rem;
}

Values and defaults

The initial value is none and the property is not inherited. Url() loads a resource; gradients are generated images. Image-set() selects candidate images and has value/syntax-specific support. Commas separate layers, and other background longhands can supply matching lists of sizes, positions, and repeat modes.

A failed resource behaves as an absent image; supply a readable background-color fallback. A fully opaque top image can conceal every lower layer. Changing image alone does not reset the other background longhands, while the broader background shorthand can.

Meaningful images need meaningful HTML

Background images have no alt attribute and are not announced as images to assistive technology. Use img for information that needs an alternative description. A filter on the element filters its content too; it is not a background-only image editor.

Learn background-size, background-repeat, and background-position.

Sources and browser support

MDN: background-image describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.