Example
Set the background-color of
different elements:
______________________________________________________________________________
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
______________________________________________________________________________
Try it yourself »
More examples at the bottom of this page.
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).
Default value:
|
transparent
|
Inherited:
|
no
|
Version:
|
CSS1
|
JavaScript syntax:
|
object.style.backgroundColor="#00FF00"
|
Browser
Support
The background-color property is
supported in all major browsers.
Note: The value "inherit" is not supported in IE7 and
earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
Tips
and Notes
Tip: Use a background color and a text color that makes the text
easy to read.
Property
Values
Value
|
Description
|
Play it
|
color
|
Specifies the background color.
Look at CSS Color Values for a complete list of
possible color values.
|
|
transparent
|
Specifies that the background
color should be transparent. This is default
|
|
inherit
|
Specifies that the background
color should be inherited from the parent element
|
Try
it Yourself - Examples
This example demonstrates how to set
the background-color of a part of the text.