background-color

BrandonDusch's avatar
Published Jun 25, 2021Updated Nov 29, 2023
Contribute to Docs

The background-color property defines a color for the background of an HTML element.

Syntax

background-color: <value>;

Where <value> can be one of the following:

  • Color keyword: blue, transparent, rebeccapurple
  • Hexadecimal value: #FF0000
  • RGB value: rgb(255, 0, 0)
  • RGBA value: rgba(255, 0, 255, 0.3)
  • HSL value: hsl(0, 100%, 50%)
  • HSLA value: hsla(180, 80%, 100%, 0.8)
  • Special keyword values: currentColor, transparent

Example 1

Set background color of the h1 element to be green:

h1 {
background-color: green;
}

Shows h1 element with green background over an aquamarine background

Example 2

Set the background color of the h1 element to be transparent:

h1 {
background-color: transparent;
}

Shows h1 element with transparent background over an aquamarine background

All contributors

Contribute to Docs

Learn CSS on Codecademy