CSS background-color Property


Example

Set the background-color of different elements:

body {
    background-color: yellow;
}

h1 {
    background-color: #00ff00;
}

p {
    background-color: rgb(255,0,255);
}

Try it yourself »

More "Try it Yourself" examples below.


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. Read about animatable Try it
Version: CSS1
JavaScript syntax: object.style.backgroundColor="#00FF00" Try it


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 Play it
color Specifies the background color. Look at CSS Color Values for a complete list of possible color values. Play it »
transparent Specifies that the background color should be transparent. This is default Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


Examples

More Examples


Example

Set the background-color of a part of the text:

span.highlight {
    background-color: yellow;
}

Try it yourself »


Related Pages

CSS tutorial: CSS Background

HTML DOM reference: backgroundColor property



Color Picker

colorpicker