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:
- Body
- Headings
- Paragraphs
- Div containers
Using background colors effectively enhances readability and design layout.
selector {
background-color: value;
}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; |
Example
<!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>Output
Browser Output
The page will have a light gray background
The heading will have a light blue background
The paragraph will have a yellow background
The div will have a pink background with border and padding
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
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.