background-color property - CSS Reference

background-color property CSS Reference

Definition and Usage

The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.

Initial transparent
Applies to all elements
Inherited no
Media visual
Computed Value If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
Animatable yes, as a color
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <color>

background-color: red
background-color: rgb(255, 255, 128)
background-color: hsla(50, 33%, 25%, 0.75)
background-color: currentColor
background-color: transparent
background-color: #bbff00
background-color: inherit

Values

<color>: Is a CSS <color> that describes the uniform color of the background. Even if one or several background-image are defined, this color can be affect the rendering, by transparency if the images aren't opaque.

Examples

.exampleOne {
        background-color: teal;
        color: white;
}
.exampleTwo {
        background-color: rgb(153,102,153);
        color: rgb(255,255,204);
}
.exampleThree {
        background-color: #777799;
        color: #FFFFFF;
}
.exampleFour {
  background-color: hsla(300, 20%, 50%, 0.8);
  color: hsla(60, 100%, 90%, 0.8);
}