background

background is shorthand for image, position, size, repeat, attachment, origin, clip, and color. Commas separate layers; the first image layer is painted on top, with the background color underneath all images.

Read a complete layer

The gradient is sized to a 32px tile. Center precedes the slash and the size follows it. The tile repeats, with a pale fallback color underneath.

<div class="sample" aria-hidden="true"></div>
<p>A repeating background with a separate fallback color.</p>

.sample {
  min-height: 120px;
  background: linear-gradient(90deg, #bfdbfe 50%, transparent 50%) center / 32px
    32px repeat #eff6ff;
}

Layer decoration below readable content

A translucent stripe layer paints above the blue gradient. The text has a solid white area so its contrast does not depend on each stripe’s position.

<div class="note">
  <p>Read the code and compare the two background layers.</p>
</div>

.note {
  padding: 1rem;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 12px,
      rgb(255 255 255 / 30%) 12px 24px
    ),
    linear-gradient(90deg, #2563eb, #0f766e);
}
.note p {
  background: white;
  color: #172554;
  padding: 0.75rem;
  margin: 0;
}

Syntax and resets

Size must follow a position separated by /. Color is permitted only in the last layer. A single box keyword sets both origin and clip; two box keywords set origin first and clip second.

Omitted longhands reset to their initial settings: image none, position 0% 0%, size auto auto, repeat repeat, attachment scroll, origin padding-box, clip border-box, and color transparent. Background settings are not inherited. Background-blend-mode is outside this shorthand.

Common mistakes

Two images in one layer without a comma form an invalid declaration. A later background:blue also clears earlier images and positioning; use background-color if only the fill should change. Background images provide no alternative text, so use actual HTML for meaningful imagery and labels.

Learn background-image, background-origin, and background-size.

Sources and browser support

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