CSS Background Color
The background-color property fills the area behind an element's content with a solid color.
Setting a background color
The <background-color> property paints the element's box, sitting behind its text and any child elements. It accepts any color value: a name, a HEX, RGB, or HSL.
Coloring the page
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f7f7f7;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This page has a light gray background.</p>
</body>
</html>It covers the whole box
The color fills the content area and the padding by default. That means adding padding to a colored element extends the color, which is useful for cards, badges, and callouts.
A colored card
<!DOCTYPE html>
<html>
<head>
<style>
.card {
background-color: #00643c;
color: white;
padding: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="card">
<p>Card content goes here.</p>
</div>
</body>
</html>Transparency
Use an RGBA or HSLA value to let whatever is behind the element show through. The default value is <transparent>, which is why elements have no background until you give them one.
A see-through panel
<!DOCTYPE html>
<html>
<head>
<style>
.panel {
background-color: rgba(0, 100, 60, 0.1);
}
</style>
</head>
<body>
<div class="panel">Panel content</div>
</body>
</html>- Works on any element, from a whole page to a single word in a span
- Accepts every color format
- Combine it with padding to size the colored area
Note: Always check that text stays readable against its background. Pair a dark background with light text and the reverse.
