CSS background-image Property

Definition and Usage

The background-image property paints one or more images behind an element's content. Each image is a file, written with url(), or a generated image such as linear-gradient() or radial-gradient(). List several images with commas. The first image is painted on top, closest to the reader.

background-color is painted underneath those images. The initial value is none. The property is not inherited, and it applies to every element, including ::first-letter and ::first-line. background-clip and background-origin decide which box the image fills.

CSS Syntax

Separate multiple images with commas. repeating-linear-gradient() is a gradient that tiles its own fade.

Property Values

How to Use background-image

Choose the element, give the image a box to paint in, then set one image or a stack.

1. Set background-image on the element that should show the picture. It is not inherited.
2. Give that element a size. An empty box with no height has no visible image. Content or height is enough.
3. Use none, one url() or gradient, or a comma-separated list. The first listed image is on top.
4. Set a background-color as well. It shows when a file fails to load, and it sits under every layer.

Live Preview

One box. Change background-image and watch the paint behind the label.

CSS Examples

Each snippet adds only what background-image needs: a box with a size, and the image. Use Try It Yourself for a live editor.

<style>
  div {
    height: 140px;
    padding: 16px;
    color: #fff;
    background-image: linear-gradient(#2563eb, #7c3aed);
  }
</style>

<div>Blue to purple</div>

<style>
  div {
    height: 140px;
    padding: 16px;
    color: #1e3a8a;
    background-color: #eff6ff;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='8' cy='8' r='3' fill='%232563eb'/><circle cx='22' cy='22' r='3' fill='%237c3aed'/></svg>");
  }
</style>

<div>Tiled file</div>

<style>
  div {
    height: 140px;
    padding: 16px;
    color: #fff;
    background-image:
      linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
      linear-gradient(135deg, #0ea5e9, #6366f1);
  }
</style>

<div>Tint on top</div>

Key Takeaways