CSS Colors and Backgrounds

CSS Background Color

Written by Swapnil RajaUpdated 30 Jul 2026

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-color to 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.

PreviousModern Colors NextCSS Background Image