background-color
Description
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 will show the background color.
| Item | Value |
|---|---|
| Initial value | transparent |
| Inherited | No. |
| Version | CSS1 |
| JavaScript syntax | object.style.backgroundColor="#00FF00" |
| Applies to | All elements. |
Syntax and Property Values
background-color: color | transparent | inherit
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;}
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
body {<!-- w w w .jav a 2 s .c o m-->
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>
The code above generates the following result.
