Background Color Property
Last updated: 2026-09-13
background-color Background Color Property
background-color sets the background color of an element and is one of the most fundamental properties in page design. It accepts every CSS color value, and the transparent keyword gives a see-through background. The property is not inherited, and every element's background is transparent by default.
| Category | |
|---|---|
| Initial Value | transparent |
| Inherited | No |
| Applies To | all |
| Animation Type | color |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
background-color: <color> | transparent;⚙️ Values
| Value | Type | Description |
|---|---|---|
<color> | Type | Background color value |
transparent | Keyword | Transparent background |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： The background color does not extend into the margin area; only the content and padding areas are painted.
Important： Always make sure the contrast between the background color and the text color meets WCAG readability standards.
❓ FAQ
QHow do I make a background fully transparent?
ASet background-color: transparent; to reveal the elements below or the page's base color. Transparency affects only the background — the element's own content (text, children) is unaffected. To make the whole element, including its content, disappear, use opacity: 0 or visibility: hidden instead.
QIs background-color inherited?
ANo. Its default value is transparent, and each element computes it independently without inheriting from its parent. But when a child's background is transparent, the parent's or body's background shows through visually — which is also why setting a background on body appears to cover the whole page.
QHow do I make the background semi-transparent without affecting the text?
AUse a color with an alpha channel, such as background-color: rgba(0, 0, 0, 0.5); or hsla(210, 50%, 50%, 0.5), or an 8-digit hex like #00000080. Only the background becomes translucent while the text stays clear. Avoid opacity, because it makes the text and children transparent too.
QCan I make a gradient with background-color?
ANo. background-color only supports solid colors; gradients belong to the background-image family and need functions like background-image: linear-gradient(to right, #ff7e5f, #feb47b);. Still, background-color is often used as the base layer under a gradient, providing a color fallback while the gradient image loads.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
