background-color

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
Inherited no
Media visual
Computed value as specified

Syntax

background-color: 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.

Ví dụ

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

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0 (1.7 or earlier)	1.0	4.0	3.5	1.0 (85)

Feature	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0 (1.9.2)	(Yes)	(Yes)	(Yes)	(Yes)