background-color

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

/* Keyword values */
background-color: red;
/* Hexadecimal value */
background-color: #bbff00;
/* Hexadecimal value with alpha channel */
background-color: #11ffee00; /* 00 - fully transparent */
background-color: #11ffeeff; /* ff - fully opaque */
/* RGB value */
background-color: rgb(255, 255, 128);
/* RGBA value or RGB with alpha channel */
background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */
​​​​​​​
/* 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;

Initial valuetransparent
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valuecomputed color
Animation typea color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The background-color property is specified as a single <color> value.

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( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support1.0121.04.013.51.0
Alpha channel for hex values52.0NoNoNoNoNo
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support(Yes)(Yes)(Yes)1.0(Yes)(Yes)(Yes)
Alpha channel for hex values52.052.0NoNoNoNoNo

1. In Internet Explorer 8 and 9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements.

See also