The background-color property sets the solid background fill color of an element's box, visible behind its content, padding, and, depending on background-clip, potentially its border.

Syntax

background-color: value;

Deep Dive Course

background-color defaults to transparent, letting whatever's behind the element, its parent's background or the page itself, show through unless explicitly set to an opaque or semi-transparent value. Unlike color, background-color is not inherited by default, so setting it on a parent doesn't automatically apply it to nested children — each element's background remains transparent by default regardless of its ancestors' background-color, which is why a background color set on a page's body doesn't automatically also appear behind every nested box unless that box's own background is also transparent, letting the body's color show through.

1Understanding Background-color

💡

Remember background-color is NOT inherited, unlike color — a background set on a parent only shows through a child if that child's own background stays transparent, it isn't automatically applied to descendants the way text color is.

editor.html

.alert {
  background-color: #fff3cd;
  padding: 16px;
}

localhost:3000

2Practical Example

Here is a real-world application of Background-color showing how it is used in production CSS code.

editor.html

body {
  background-color: navy;
}

.card {
  background-color: white;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Background-color:

1. Set an explicit background-color rather than relying on transparency when an element genuinely needs a solid, opaque background behind its content

2. Use rgba() or a similar alpha-channel format for background-color when you want a semi-transparent tint that lets whatever's behind it partially show through

3. Remember background-color isn't inherited, so a child element needs its own explicit background-color, or to remain transparent, rather than automatically picking up a parent's background

⚠️

Tip: Remember background-color is NOT inherited, unlike color — a background set on a parent only shows through a child if that child's own background stays transparent, it isn't automatically applied to descendants the way text color is.

editor.html

.alert {
  background-color: #fff3cd;
  padding: 16px;
}

localhost:3000

Examples

Example 01Basic Usage

.alert {
  background-color: #fff3cd;
  padding: 16px;
}

Example 02Advanced Example

body {
  background-color: navy;
}

.card {
  background-color: white;
}

Best Practices

Set an explicit background-color rather than relying on transparency when an element genuinely needs a solid, opaque background behind its content
Use rgba() or a similar alpha-channel format for background-color when you want a semi-transparent tint that lets whatever's behind it partially show through
Remember background-color isn't inherited, so a child element needs its own explicit background-color, or to remain transparent, rather than automatically picking up a parent's background

Interview Question

Why doesn't a background-color set on a parent element automatically apply to its children, the way color does?▼

Hint: Think about which specific CSS properties are designated as inherited by default, and whether background-color is one of them.

CSS only designates a specific set of properties, mostly text-related ones like color and font-family, as inherited by default, and background-color is deliberately not one of them — every element's background-color independently defaults to transparent regardless of what background color any of its ancestors happen to have set. This is a deliberate design choice: if background-color inherited the way color does, every single nested element would automatically pick up its parent's background color by default, and achieving a genuinely transparent child that lets a parent's background show through, a very common, intentional design pattern, would become considerably more awkward, requiring an explicit override on every nested element instead of simply relying on the sensible default of transparency. Because background-color isn't inherited, a parent's background naturally shows through any descendant that doesn't specify its own background-color, which is exactly the transparent-by-default behavior most layouts actually want.

Exercises

MediumPractice using Background-color in a real scenario.

View Solution

.alert {
  background-color: #fff3cd;
  padding: 16px;
}

Frequently Asked Questions

Why doesn't a background-color set on a parent element automatically apply to its children, the way color does?▼

Related Functions

ColorBackground-imageOpacity