View video tutorial
CSS Background Color
CSS
The background-color property specifies the background color of an element.
CSS background-color
➔ The background-color property is used to specify the background color of an element.
➔ Any valid color name or HEX value or RGB value can be assigned as a value for the background-color property.
Syntax
background-color: color | transparent | initial | inherit;
Property values
| Value | Description |
|---|---|
| color | Specifies the background color using any color system (color name, RGB, HEX, HSL). |
| transparent | Specifies that the background color will be transparent. This is default. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
div {
margin: 10px;
}
.d1 {
background: #abcdef url("resources/images/flowers-hibiscus-t.png");
border-radius: 5px;
padding: 10px;
min-height: 230px;
}
.d2 {
background-color: #abcdef;
border-radius: 5px;
padding: 10px;
min-height: 200px;
}
</style>
</head>
<body>
<div class="d1">
<p>The background-color property is used to specify the background color of an element.</p>
<p>Any valid color name or HEX value or RGB value can be assigned as a value for the background-color property.
</p>
<p>In CSS the background property is used to set multiple background properties at once, including background-color .</p>
</div>
<div class="d2">
<p>The background-color property is used to specify the background color of an element.</p>
<p>Any valid color name or HEX value or RGB value can be assigned as a value for the background-color property.
</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.