Background Color

By the end of this lesson, you will be able to fill an element's background with a solid colour using background-color, choose valid colour values, and understand when to use it instead of the background shorthand.

What it is

background-color is a CSS property that paints a solid colour behind an element. By default, the colour fills the element's content and padding area and extends under the border area. It does not change text colour, border colour, or layout size. The initial value is transparent, so an element with no background colour lets its parent's background show through.

Related terms: colour value, transparent, currentColor, background shorthand, and contrast.

Why it matters

• Creates visual separation between sections, cards, buttons, and page areas.
• Improves readability when paired with appropriate text colour.
• Supports brand styling with reusable colour tokens.
• Helps indicate state, such as hover, focus, selected, or disabled.
• Can be animated or transitioned for subtle interface feedback.

Syntax or steps

The smallest useful pattern is a selector followed by one declaration:

selector {
  background-color: colour-value;
}

Valid colour values include:

• Keywords: red, white, transparent.
• Hex: #ffffff, #f0f8ff.
• RGB: rgb(255, 255, 255).
• RGBA: rgba(255, 255, 255, 0.8).
• HSL: hsl(210, 100%, 97%).

Steps: choose the element, pick a colour, declare background-color, then check text contrast.

Example

<!doctype html>
<html>
<head>
<style>
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #f4f6f8;
}

.card {
  width: 280px;
  margin: 40px auto;
  padding: 20px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.card h2 {
  margin-top: 0;
  color: #1f2937;
}

.card p {
  color: #4b5563;
}
</style>
</head>
<body>
<div class="card">
  <h2>Welcome</h2>
  <p>This card uses a solid white background.</p>
</div>
</body>
</html>

Part-by-part explanation:

• body { background-color: #f4f6f8; } sets a light page background.
• .card { background-color: #ffffff; } fills the card with white.
• padding and margin make the coloured area easier to see.
• box-shadow is optional; it separates the card from the page background.
• Text colours are chosen to contrast with the white card.

Common mistakes

• Using color when you mean background-color. color changes text colour, not the background.
• Choosing low-contrast combinations, such as light grey text on a white background. Test readability.
• Forgetting that transparent lets parent backgrounds show through. If the parent has no colour, the page background may appear.
• Expecting the background to cover the element's margin. Margins stay outside the painted background area.

When to use it

Use background-color when you only need a solid colour. Use the background shorthand when you need to set multiple background layers at once, such as colour, image, repeat, and position.

Practice

Guided exercise: create a .note element with padding, a light yellow background, and dark text.

.note {
  padding: 16px;
  background-color: #fff3cd;
  color: #664d03;
}

Challenge: add a hover state that makes the note slightly darker. Expected output: the note changes colour when the pointer is over it.

.note:hover {
  background-color: #ffe69c;
}

Quick check

Question: Which property fills an element's background with a solid colour?

Answer: background-color.

Summary

background-color is the direct way to paint a solid colour behind an element. It is simple, readable, and ideal for cards, sections, buttons, and state changes. Use the background shorthand only when you need multiple background properties together.