CSS background-color Property
CSS background-color property sets an element background color. The background covers the content, padding, and border boxes (but not the margin).
You can choose colors from our Color Picker tool. Colors can be specified as a color name (e.g., "red"), a HEX value (e.g., "#ff0000"), or an RGB value (e.g., "rgb(255,0,0)").
It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough, so people with low vision will be able to read the content of the page.
| Initial Value | transparent |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | Yes. The color of the background is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.backgroundColor = "#FFFFFF"; |
Syntax
Syntax of CSS background-color property
background-color: color | transparent | initial | inherit;Example of the background-color property:
Example of CSS background-color property
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #8ebc42;
}
</style>
</head>
<body>
<h2>Background-color Property Example</h2>
<p>Here the background-color is specified with a hex value.</p>
</body>
</html>
INFO
You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the background-color property. Learn more about HTML Colors.
background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */Example of the background-color property with the "transparent" value:
Example of CSS background-color property with transparent value
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Background-color Property Example</h2>
<p>In this example the background-color is set to transparent. This is the default value.</p>
</body>
</html>Example of the animated version of the background-color property:
Example of CSS background-color property with animation
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eee;
animation: mymove 5s infinite;
}
@keyframes mymove {
30% {
background-color: #1c87c9;
}
100% {
background-color: #eee;
}
}
</style>
</head>
<body>
<h2> Animation of background-color property</h2>
<p>
In this example it gradually changes the background color from grey to blue, and back to grey.
</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| transparent | This is the default value and it defines the background color as transparent. It means that there is no background color. | Play it » |
| color | Defines the background color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
What is the purpose of using 'background-color' property in CSS?