CSS Reference Property

background-color 4v6r6w

The background-color property is used to set the background color of an element. It sets a background color using a <color> value. 6d3m4t

The element can also have one or multiple background images set using background-image property.
The color set with the background-color property is drawn behind any background images. If one background image is set and the image turns out invalid, then the background color will be visible.

The background color is clipped according to the background-clip entry for details on how to clip a background color.

Sometimes, even if a valid background image is set, the color can still show through if the background image is not fully opaque, like if you’re using an image with fully-transparent areas (an image with an alpha channel).

When using a background image on an element that has some text, you should make sure that the color of the text is not too similar to, or the same as the background color of that element; otherwise the text would be unreadable if the image could not be shown for some reason.

Official Syntax 2f2j3w

  • Syntax:

    background-color: <color>
                            
  • Initial: transparent
  • Applies To: all elements
  • Animatable: yes

Values 445h6m

<color>
A <color> entry for all possible values.

Examples 5w70f

The following sets the background color of all h1 elements to black.

h1 { 
    background-color: #000;
    color: white;
} 
                

The following sets the background color of all elements of class module.

.module { 
    background-color: hsla(250, 30%, 50%, 0.9);
} 
                

Live Demo 603y6q

The following live demos shows some examples:

View this demo on the Codrops Playground

Browser 51c73

The background-color property works in all major browsers: Chrome, Firefox, Safari, IE, Opera, and on Android and iOS.

Written by

Last updated June 3, 2020 at 12:35 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.