Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Summary

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

Initial valuetransparent
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valueIf 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 rgba(0,0,0,0).
Animatableyes, as a color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;
background-color: #bbff0077;

/* RGB value */
background-color: rgb(255, 255, 128);

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentColor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

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. In CSS, transparent is a color.

Formal syntax

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Examples

HTML

<div class="exampleone">
 Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exampletwo">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="examplethree">
  Lorem ipsum dolor sit amet, consectetuer
</div>

CSS

.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

Result

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background-color' in that specification.
Candidate Recommendation Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color>
CSS Level 2 (Revision 1)
The definition of 'background-color' in that specification.
Recommendation No change
CSS Level 1
The definition of 'background-color' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (1.7 or earlier) 1.0 4.0 [1] 3.5 1.0 (85)
Alpha channel for hex value    52.0      
Feature Firefox Mobile (Gecko) Android Android Webview IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support 1.0 (1.9.2) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Alpha channel for hex value   No support 52.0       52.0

[1]: In IE8-9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements. See the click event documentation for details.

See also