Summary
The background-color
CSS property sets the background color of an element, either through a color value or the keyword transparent
.
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
/* 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;
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 severalbackground-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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "css/properties/background-color" (depth: background-color) to the MDN compatibility data repository.