Tutorial Article

CSS Background Color

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: Using background colors effectively enhances readability and design layout. 👉 This sets the background color of the entire page. Attributes Property Description Example […]

Apr 1, 2026CSSCSS Colors & BackgroundsTutorials

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.

Syntax

selector {
    background-color: value;
}

Example

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

Complete Background Color 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-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.