background-color

The background-color property fills an element's background with a solid color. It extends behind padding but not margin. Use any color format: hex, rgb, hsl, or named colors.

Background Color Syntax

CSS

/* Named colors */
.element {
  background-color: red;
  background-color: blue;
  background-color: white;
}

/* Hex color */
.element {
  background-color: #ff0000;
}

/* RGB color */
.element {
  background-color: rgb(255, 0, 0);
  background-color: rgba(255, 0, 0, 0.5);
}

/* HSL color */
.element {
  background-color: hsl(0, 100%, 50%);
}

/* Transparent */
.element {
  background-color: transparent;
}

Common Patterns

CSS

/* Card background */
.card {
  background-color: white;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

/* Hover state */
button {
  background-color: #0066cc;
}

button:hover {
  background-color: #0052a3;
}

/* Alternating rows */
tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* Semi-transparent overlay */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Gradient background */
.hero {
  background-color: #0066cc;
  /* Fallback for browsers without gradient */
}

Note

Background-color fills the content and padding area. Use transparent or rgba with alpha for see-through backgrounds.

Opacity and alpha: [opacity & alpha transparency](/css/opacity-alpha).