Background color

Learn the background-color property.

The background-color property

background-color paints an element's surface. You set the text color with color, and the surface color with background-color.

Any color format works as the value: #1a1a2e, rgb(230, 57, 70), hsl(355, 78%, 56%) or transparent. It is the shortest way to color a badge, a button or a section's surface in one line.

color vs background-color

Two properties are easy to confuse: color is the text color, background-color is the surface behind it. To make a paragraph's text navy, you write color: navy; to paint its surface, background-color: #f5f5f5.

Keep enough contrast between the two so the text stays readable. Dark text on a dark surface is unreadable. A practical pair: cream surface #fdf6e3 with dark navy text #1a1a2e.

Exercise Style the .badge

Add a .badge class selector. Set its background-color property to #ff5733 and its color property to #fff.

Show example solution

/* style the .badge */
.badge {
  background-color: #ff5733;
  color: #fff;
}

Test yourself

Which value is NOT valid for background-color?
```
.badge {
  background-color: /* ? */;
}
```
- transparent
- rgb(230, 57, 70)
- hsl(355, 78%, 56%)
- 1px solid #333
Show answer

1px solid #333 — Correct. 1px solid #333 is a border value; background-color wants a color.

Write a valid hex value for the badge surface

.badge {
  background-color: ____;
  color: #fff;
}

Show answer

.badge {
  background-color: #ff5733;
  color: #fff;
}

Match each property to its effect

color

Sets the text color
background-color

Sets the surface color
opacity

Fades the whole element
rgba()

Fades only the color

Next lesson: Background image

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies