CSS background-color property

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).

Example

#

An element with background-color set to lightblue.

Element with background color
<style>
  .bg-color {
    background-color: lightblue;
    padding: 20px;
  }
</style>

<div class="bg-color">
  Element with background color
</div>

Syntax

background-color: color | transparent | initial | inherit;

Values

#

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.

More Examples

Click the buttons to see the different background-color.

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


Browser support

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

You may also like

Guides