CSS background-color Property

CSS background-color property is sets the background color of an element.

CSS background-color of element can be changed using several different methods like color name, color hex code, RGB color code.

The background-color of element affect on element padding but not margin.

Usages

The following table outline the usages and version history of this property.

Default value: transparent
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.backgroundColor = "#F1F1F1"

Syntax

Here is a syntax for the CSS background-color property

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

Property Values

The following table describes the values of this property.

Value Description
transparent Default. Specifies the transparent background color
color Specifies the background color
Value Description
color name Name of the background color (eg, red, pink, blue)
#xxxxxx Hexadecimal representation of the background color
rgb(x, x, x) RGB representation of the background color
rgba(x, x, x, x) RGBA representation of the background color
hsl(x, x, x) HSL representation of the background color
hsla(x, x, x, x) HSLA representation of the background color
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows the color name, hex code, RGB, RGBA, HSL, HSLA values.

.first {
  background-color: orange;
}
.second {
  background-color: #ffa700;
}
.third {
  background-color: rgb(255, 167, 0);
}
.four {
  background-color: rgb(255, 167, 0, 0.9);
}
.five {
  background-color: hsl(39, 100%, 50%);
}
.six {
  background-color: hsl(39, 100%, 50%, 0.9);
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.