CSS background-color property specifies the background color of an element. The color value can be specified in any valid CSS color formats like ‘color name’, ‘HEX ‘, ‘RGB’, ‘HSL’, etc.
In the example below, the <h2> element has a yellow color background:
Example:
h2{
background-color: red;
}
Similarly, we can use the <body> element to set the background color of the whole HTML body. See the example below:
Example:
body{
background-color: cyan;
}
Set background-color using different color formats:
Example:
h1{
background-color: #FF7F50; /* HEX Value */
}
h2{
background-color: rgb(11, 252, 3); /* RGB Value */
}
h3{
background-color: hsl(182, 98%, 50%); /* HSL Value */
}
p{
background-color: transparent; /* Transparent background */
}
CSS Syntax
The background-color property has the following syntax:
background-color: color|transparent|initial|inherit;
Property Values
The background-color property accepts the following values:
| color | Specifies the background color of an element in any valid CSS color formats like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. |
| transparent | Specifies a transparent background color. This is the default. |
| initial | Sets the background-color property to its default value(transparent). |
| inherit | Inherits the background-color property from the parent element. |
General Info
| Default Value | transparent |
| Inherited | No |
| JavaScript Usage | element.style.backgroundColor = “red” |
Related Pages
CSS Tutorial: CSS Background
