background-color
The background color of an element.
Syntax
background-color: color;Values
| Parameter | Type | Description |
|---|---|---|
| color | color | Any color: name, hex, `rgb()`, `hsl()`. |
| transparent | keyword | Transparent (the default). |
Examples
Background colors:
<style>
mark { background-color: gold; }
.row:hover { background-color: aliceblue; }
</style>
<p>Some <mark>highlighted</mark> text.</p>
<p class="row">Hover over this line.</p>Notes
The background fills the content and padding area, and extends under the border. A semi-transparent color such as rgb(0 0 0 / 0.5) makes only the background see-through, unlike opacity, which affects the whole element.
See also
- background — A shorthand for all background properties: color, image, position, size and repeat.
- color — The color of the text (and the default color of borders and SVG icons).
- opacity — The transparency of the whole element together with its content.
Related recipes
In the tutorial
- Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.