CSS Colors and Backgrounds
CSS Background Color
Set background colors on elements while accounting for transparency, inherited text color, contrast, and the area painted by the background.
The CSS Background Color property is used to set the background color of an HTML element.
It helps improve the visual appearance of a webpage and can be applied to elements like: The supporting concepts are explained in CSS Colors and CSS Background Image.
- Body
- Headings
- Paragraphs
- Div containers
Using background colors effectively enhances readability and design layout.
Syntax
css
selector {
background-color: value;
}Example
css
body {
background-color: lightblue;
}👉 This sets the background color of the entire page.
Attributes
| Property | Description | Example |
|---|---|---|
| background-color | Sets background color | background-color: yellow; |
| color | Sets text color | color: black; |
| border | Adds border to element | border: 1px solid black; |
| padding | Adds inner spacing | padding: 10px; |
Background color and transparency
The background is painted behind an element's content and padding and, by default, beneath the border. A transparent background reveals whatever is painted below it; it does not inherit the parent's background color. Always provide a solid fallback before translucent or advanced color values, and verify that foreground contrast remains acceptable over every background layer and interactive state.
Example
Complete Background Color Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Color</title>
<style>
body {
background-color: lightgray;
}
h1 {
background-color: lightblue;
color: black;
}
p {
background-color: yellow;
}
div {
background-color: pink;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Background Color Example</h1>
<p>This paragraph has a yellow background.</p>
<div>This is a div with pink background.</div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| background-color | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Use
background-colorto set solid background colors - Can use color formats like name, HEX, RGB
- Helps improve contrast and readability
- Avoid using very bright or clashing colors
- Combine with text color for better accessibility
Conclusion
The CSS Background Color property is essential for designing visually appealing web pages. It allows you to highlight sections, improve readability, and create a structured layout using colors effectively.