CSS backgroundcolor Property (original) (raw)
CSS background-color Property
Last Updated : 11 Jul, 2025
The**background-color**CSS property sets the background color of an element, allowing you to create a solid color backdrop. You can define the color using named colors, hexadecimal values, RGB, RGBA, HSL, or HSLA. This property applies to both the content and padding areas of the element.
By using the background-color property, you can easily enhance the visual appearance of your webpage. It provides flexibility in how you style the background, whether for a specific element or the entire page.
**Syntax
element {
background-color : color| transparent| initial | inherit;
}
Default value: It has a default value i.e. transparent.
**Property Values
| Values | Description |
|---|---|
| color | Defines the color of text, borders, backgrounds, and other elements. |
| transparent | Sets the color to be fully transparent, allowing underlying content to show through. |
| initial | Resets the property to its default value, which varies depending on the element. |
| inherit | Inherits the value of the property from the parent element. |
Here is the detailed explanation of each property value.
CSS background-color Property Values
**1. color Value:
It defines the background color value or color codes. For example: A color name can be given as: “green” or HEX value as “#5570f0” or RGB value as “rgb(25, 255, 2)”.
Syntax:
element {
background-color: color_name;
}
Example: In this example The background-color CSS property is used to set the background color of elements. Here, it styles the body in green,
in blue, and in black with contrasting text colors.
html `
background-color property