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

ItemValue
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