CSS background-color Property
The background-color property sets the background color of an element.
Description & Usage
The background-color property sets the solid background shade behind element content and padding.
It covers the padding area up to the outer edge of the border. Semi-transparent colors using rgba() or hsla() allow underlying elements to shine through.
Background-color is painted beneath any background-image layers. When used with border-radius, the background color respects rounded corners and clips accordingly.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Background |
| Initial Value | transparent |
| Inherited | No (not inherited) |
| Applies To | All elements |
Syntax
background-color: #f8fafc | rgba(255, 255, 255, 0.9) | transparent;Property Values
| Value | Description |
|---|---|
| #ffffff | Solid white background. |
| transparent | No background color, revealing parent element below. |
Code Examples
Light Card Background
.card {
background-color: #f8fafc;
padding: 1.5rem;
}
Fills card element with soft neutral grey background.