background-color

background-color paints a uniform fill behind an element’s background images. Transparent reveals what is behind the box; it does not mean the element inherited that underlying color.

Compare opaque and translucent fills

The parent supplies a stripe pattern. The opaque child covers it; the translucent child lets the pattern show through while keeping its text fully opaque.

<div class="stage">
  <p class="opaque">Opaque background</p>
  <p class="alpha">Translucent background</p>
</div>

.stage {
  padding: 1rem;
  background: repeating-linear-gradient(45deg, #e2e8f0 0 12px, white 12px 24px);
}
p {
  padding: 0.75rem;
  color: #172554;
}
.opaque {
  background-color: #dbeafe;
}
.alpha {
  background-color: rgb(219 234 254 / 65%);
}

Use a stable base color under a decorative image

The pale base remains if the image layer is removed or unavailable. The text’s color is set separately, and the subtle gradient is decoration rather than a text alternative.

<p class="note">Start with a complete example and change one value.</p>

.note {
  background-color: #eff6ff;
  background-image: linear-gradient(90deg, transparent, rgb(37 99 235 / 8%));
  color: #172554;
  padding: 1rem;
}

Values and defaults

The initial value is transparent and background-color is not inherited. It accepts color values, including alpha colors and currentColor. CurrentColor follows the element’s foreground color; it can accidentally produce identical text and background colors if used without care.

The color lies behind all background images. Background-clip controls its painting boundary; with multiple layers, the bottom layer’s clipping value controls the color. The usual border-box painting includes the area beneath a transparent border.

Common mistakes

A translucent background does not fade descendants; opacity fades the composited whole box. A later background shorthand can reset the color. Newer color functions need a value-specific fallback and support check.

Check text contrast against the resulting background rather than the authored alpha color in isolation. Learn color, background, and background-image.

Sources and browser support

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