CSS Property background-color

background-color sets a solid color for the background. This color fills the content, padding, and border areas of the element, extending to the outer edge of the element's border.

Borders that have transparent sections such as dashed borders will show the background color through the transparent sections.

Examples:

h4  {background-color: white;}
p  {background-color:  rgb(50%,50%,50%);}
pre  {background-color:  #FF9;}

Summary

Item	Value
Initial value	transparent
Inherited	No.
Version	CSS1
JavaScript syntax	object.style.backgroundColor="#00FF00"
Applies to	All elements.

CSS Syntax

background-color: color | transparent | inherit

Property Values

The property values are listed in the following table.

Value	Description
color	Set the background color.
transparent	Set the background color to transparent. Default value
inherit	Inherit the background color from the parent element

The color value can be specified by:

Value	Description
name	a color name, like "red"
RGB	an RGB value, like "`rgb(255,0,0)`"
Hex	a hex value, like "`#ff0000`"

The following CSS uses the hex value for background color.

h1 {background-color:#6195ed;} 
p {background-color:#e0e0ff;} 
div {background-color:#ffc4de;}

Browser compatibility


`background-color`	Yes	Yes	Yes	Yes	Yes

Example

An example showing how to use background-color CSS property.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
body {<!--   w  ww.  j  a  va  2s. c om-->
    background-color: yellow;
}

div#one {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(128, 128, 128);
    margin: 5px;
    float: left;

    background-color: transparent;
}
     
        </style>
    </head>
    <body>
        <div id='one'></div>

    </body>
</html>

Click to view the demo

Example 2

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

The following code sets the background color for the paragraph to lightgray.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { <!--   ww  w .j ava  2 s  .  c om-->
            background-color: lightgray; 

        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML)
        </p> 
    </body> 
</html>

Click to view the demo