W3cubDocs

background-color

The background-color CSS property sets the background color of an element, using either 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 value	`transparent`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Media	visual
Computed value	computed color
Animation type	a color
Canonical order	the 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

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	12	1	4¹	3.5	1
Alpha channel for hex values	52	No	No	No	No	No

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic support	Yes	Yes	Yes	4	Yes	Yes	Yes
Alpha channel for hex values	52	52	No	No	No	No	No

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.