The CSS background-color property
The CSS background-color property fills an element's background with a solid color. Use a keyword, hex code, or rgb() / hsl() value, e.g. background-color: #f5f7fb;. The color sits behind the content and padding but stops at the border, and unlike color it is not inherited.
Overview
Where color paints the text, background-color paints the area behind it. The fill covers the element's content and its padding, then stops at the border — so a box with padding gets a comfortable band of color around its text.
It accepts the same color notations as every other color property: keywords, hex codes, rgb() and hsl(). The default is transparent, which is why elements look like they have no background until you give them one — whatever sits behind simply shows through.
Two practical notes. background-color is not inherited, so each element you want filled needs its own. And it is really the simplest slice of the bigger background shorthand, which also handles images, gradients and positioning when you need them.
Syntax
selector {
background-color: value;
}
/* e.g. a soft gray card */
.card {
background-color: #f5f7fb;
}Values
The background-color property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
keyword |
A named color such as white, black or tomato. |
#hex |
A hex code like #f5f7fb or the short #fff. |
rgb() |
rgb(245 247 251), with an optional / 0.5 for a semi-transparent fill. |
hsl() |
hsl(216 43% 97%), convenient for nudging lightness up or down. |
transparent |
No fill, so the background behind shows through. This is the default. |
currentColor |
Match the element's own text color. |
Examples
<style>
.card {
background-color: #f5f7fb;
color: #0f172a;
padding: 20px 24px;
border-radius: 10px;
font: 16px/1.5 system-ui, sans-serif;
}
</style>
<div class="card">A soft gray card. The fill covers the padding, then stops at the rounded edge.</div>Example #2
<style>
.photo {
background-color: #334155;
color: #fff;
padding: 28px;
border-radius: 10px;
font: 600 18px system-ui, sans-serif;
}
.badge {
background-color: rgb(255 255 255 / 0.18);
padding: 4px 10px;
border-radius: 999px;
font-size: 13px;
}
</style>
<div class="photo"><span class="badge">New</span> A semi-transparent badge using rgb() alpha.</div>Best practices
- Always pair a
background-colorwith a readable color — set both together so a section never inherits text you can't see. - Use
rgb(0 0 0 / 0.5)-style alpha for overlays instead of a separate semi-transparent element. It is one declaration and easy to tune. - Set a background on the
<body>as your page base, then give cards and bars their own so the layering reads clearly. - Keep enough contrast between the background and its text — the same 4.5:1 ratio that applies to color applies here.
Accessibility
The color you set here is half of every contrast calculation on the element, so it directly affects readability. Whenever you change a background-color, check the text on top of it still clears 4.5:1 for normal text (or 3:1 for large text).
Watch out for partial transparency. A fill like rgb(0 0 0 / 0.4) over a busy photo can leave the text legible in one spot and unreadable in another. If you layer text over an image, a solid or near-solid overlay is far safer than a faint one.
Frequently asked questions
How do I add a background color in CSS?
background-color on the element, e.g. .card { background-color: #f5f7fb; }. The value can be a keyword, hex code, or rgb() / hsl() function.What is the difference between color and background-color?
background-color fills the area behind it. They are independent, so you usually set both together.How do I make a background semi-transparent?
background-color: rgb(0 0 0 / 0.5) for 50% black. Avoid the opacity property for this, because opacity also fades the text and any children.Does background-color cover the border?
background-clip property lets you change where the paint stops.