CSS background-color Property

Definition and Usage

The background-color property paints a solid color behind an element's content. By default it fills the border box, under the border. Change the paint area with background-clip.

The color sits under any background-image. Transparent pixels in an image still show the color. To style the text itself, use color. Check contrast so the text stays readable.

CSS Syntax

A <color> can be a name (rebeccapurple), hex (#2563eb), rgb(), hsl(), and other color forms. One value only — this property does not take a comma list.

Property Values

Each editor below sets only background-color (and a text color when contrast needs it).

How to Use background-color

Pick a fill, put it on the element, then check text contrast.

1. Choose a color value: name, hex, rgb(), or hsl().
2. Set background-color on the element. It is not inherited.
3. Set a contrasting color for the text. Aim for about 4.5:1 contrast for normal text (WCAG).
4. Remember the fill sits under any background-image.

Live Preview

Change only background-color on the sample box. The label stays readable on each preset.

CSS Examples

Each snippet sets only the fill you are studying. Text color is added when contrast needs it. Use Try It Yourself for a live editor.

<style>
  div {
    background-color: #2563eb;
    color: #fff;
    padding: 16px;
  }
</style>

<div>Solid background</div>

<style>
  section {
    background-color: #fde68a;
    padding: 16px;
  }
  div {
    background-color: rgb(37 99 235 / 0.5);
    padding: 16px;
  }
</style>

<section>
  <div>Half-blue over yellow</div>
</section>

<style>
  div {
    color: #db2777;
    background-color: currentColor;
    padding: 16px;
  }
  span {
    color: #fff;
  }
</style>

<div><span>Pink fill from currentColor</span></div>

Key Takeaways