CSS Background Color Tutorial | HTML & CSS Background Colors

CSS Background Colors

Learn how to add background colors to HTML elements using the CSS background-color property and common color formats.

These color values can be used with CSS properties such as color, background-color, and border-color.

The CSS Background-Color Property

The CSS background-color property sets the background color of an HTML element. It can be applied to the entire page or to individual elements such as headings, paragraphs, sections, buttons, and other containers.

selector {
  background-color: color;
}

For example:

p {
  background-color: lightblue;
}

Background Color Values

Background colors can be specified using the same CSS color formats used for text and other color properties, including named colors, HEX, RGB, HSL, and HWB values.

Named Color

background-color: lightblue;

HEX

background-color: #add8e6;

RGB

background-color: rgb(173 216 230);

HSL

background-color: hsl(195 53% 79%);

HWB

background-color: hwb(195 68% 10%);

These examples represent approximately the same light blue color using different CSS color formats.

Applying Background Colors to Elements

The background-color property can be applied to many different HTML elements. In the HTML Editor example below, different background colors are applied to the page, a heading, a paragraph, and a button.

Play in Editor

Setting the Page Background Color

To set the background color of the entire webpage, apply the background-color property to the <body> element.

body {
  background-color: #f5f5f5;
}

Transparent Background Colors

CSS color values can include an alpha value to create a partially transparent background. In the HTML Editor example below, the background uses an RGB color with 50% transparency while the text remains fully opaque.

Play in Editor

Background Color Alpha vs. Opacity

Using an alpha value in a background color makes only the background color transparent. In contrast, the CSS opacity property affects the entire element, including its text and other content.

Transparent Background Color

.example {
  background-color: rgb(0 102 204 / 50%);
}

Element Opacity

.example {
  background-color: #0066cc;
  opacity: 0.5;
}

When you want the background to be transparent while keeping the content fully visible, use a color format with an alpha value instead of applying opacity to the entire element.

Background Color and Text Contrast

Background and text colors should provide enough contrast for content to remain easy to read. Light backgrounds generally work best with darker text, while dark backgrounds generally require lighter text.

.notice {
  color: #ffffff;
  background-color: #333333;
}

Avoid combinations where the text and background colors are too similar, because low contrast can make content difficult to read.

Background Colors with CSS Classes

CSS classes make it easy to apply different background colors to selected elements without styling every element of the same type. In the HTML Editor example below, several classes are used to create different background-color styles.

Play in Editor

Background Color Best Practices

Use background colors that provide sufficient contrast with text.
Use CSS instead of obsolete HTML attributes to control background colors.
Use consistent color formats throughout your stylesheet when practical.
Use alpha colors when only the background needs transparency.
Avoid relying on background color alone to communicate important information.

Common Background Color Mistakes

Using the Obsolete bgcolor Attribute

Avoid older HTML such as:

<body bgcolor="lightblue">

Use CSS instead:

body {
  background-color: lightblue;
}

Using Opacity When Only the Background Should Be Transparent

Applying opacity to an element also makes its content transparent.

.example {
  opacity: 0.5;
}

If only the background should be transparent, use an alpha color instead.

.example {
  background-color: rgb(0 102 204 / 50%);
}

Complete Background Color Example

The HTML Editor example below combines background colors, text colors, CSS classes, and transparent backgrounds in a complete webpage. Experiment with the color values to see how they change the appearance of each element.

Play in Editor

Summary

The CSS background-color property controls the background color of an HTML element.

Background colors can be specified using named colors, HEX, RGB, HSL, HWB, and other supported CSS color formats.

Alpha values can make a background color partially transparent without making the element's text and other content transparent.

When choosing background colors, always consider readability and maintain sufficient contrast between the background and foreground content.