CSS background-color Property

Example

Set the background color for a page:

body {background-color: coral;}

Definition and Usage

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

Tip: Use a background color and a text color that makes the text easy to read.

Default value:	transparent
Inherited:	no
Animatable:	yes.
Version:	CSS1
JavaScript syntax:	object.style.backgroundColor="#00FF00"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which background-color is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background-color	1.0	4.0	1.0	1.0	3.5

CSS Syntax

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

Property Values

Value	Description	Demo
color	Specifies the background color.
transparent	Specifies that the background color should be transparent. This is default
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Specify the background color with a HEX value:

body {background-color: #92a8d1;}

Example

Specify the background color with an RGB value:

body {background-color: rgb(76,76,255);}

Example

Specify the background color with an RGBA value:

body {background-color: rgba(76,76,255,0.3);}

Example

Specify the background color with a HSL value:

body {background-color: hsl(240, 43%, 51%);}

Example

Specify the background color with a HSLA value:

body {background-color: hsla(240, 43%, 51%, 0.3);}

Example

Set background colors for different elements:

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}