Background Color

Learn how to change the background color of HTML elements using CSS.

What is Background Color?

The background-color property is used to set the background color of an HTML element.

It can be applied to elements such as div, section, body, header, and many others.

div

→

background-color

→

Colored background

We can use a color name such as lightblue.

div {
    background-color: lightblue;
    padding: 20px;
}

Browser Output

This div has a light blue background color.

Background colors can also be defined using HEX values.

div {
    background-color: #e0f2fe;
    padding: 20px;
}

Browser Output

This div uses a HEX background color.

RGB values can also be used to define a background color.

div {
    background-color: rgb(220, 252, 231);
    padding: 20px;
}

Browser Output

This div uses an RGB background color.

We can apply a background color to a complete section of a webpage.

section {
    background-color: #f3e8ff;
    padding: 30px;
}

Browser Output

Learn Full Stack Development step by step.

CSS supports different ways to specify background colors.

Format	Example	Meaning
Color Name	`lightblue`	Uses a predefined CSS color name.
HEX	`#e0f2fe`	Uses hexadecimal color notation.
RGB	`rgb(220, 252, 231)`	Uses red, green and blue values.
RGBA	`rgba(59, 130, 246, 0.5)`	Adds transparency to the color.

Defines the background color of an HTML element.


                            background-color: lightblue;

Adds space between the content and the background area.


                            padding: 20px;

Beginner Tip:

The background-color property changes the area behind the content of an element. The content itself remains inside that colored area.

background-color changes the background color of an element.
CSS supports color names, HEX, RGB and RGBA.
padding can be used to create space inside the colored area.
Background colors can be applied to divs, sections, headers, body and other elements.