The background-color property specifies the background color.
Background color values can be hex, rgb, hsl, rgba, hsla, or a color name.
This property can also be set to transparent (no background).
An element with background-color set to lightblue.
<style>
.bg-color {
background-color: lightblue;
padding: 20px;
}
</style>
<div class="bg-color">
Element with background color
</div>
background-color: color | transparent | initial | inherit;
| Value | Description |
|---|---|
| color | Sets background color. Accepts color name, hex, rgb, rgba, hsl, hsla values. |
| transparent | Default. Sets the background to transparent. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different background-color.
<style>
.bg-example {
padding: 25px;
background-color: #c6d2fe;
}
</style>
<div class="bg-example">
background-color: #c6d2fe
</div>
Note: both rbga and hsla can add transparency to their colors.
This table shows when background-color support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
