CSS background-color Property

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

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, <h1> in blue, and <h2> in black with contrasting text colors.

Output: 👁 Image

2. transparent Value:

It is the default value. It specifies the transparent background-color.

Syntax

element {
 background-color : transparent;
}

Example: In this example the body and headings (<h1> and <h2>) have a transparent background, allowing the page background color (if any) to show through.

Output: 👁 Image

3. initial Value:

It is used to set the default value. It does not set the background color.

Syntax:

element {
 background-color: initial;
}

Output:

4. Inherit:

The inherit keyword for the color property causes an element to take the color value from its parent element. This means the text, borders, backgrounds, or other elements within the element will automatically inherit the color of their parent.

Syntax:

element {
 background-color: Inherit;
}

Example: In this example, the #parent div has a color: blue; property. The #child div inherits this color, so its text will also be blue.

Output:

Supported Browsers

The browser supported by css background-color Property are listed below:

• Google Chrome
• Edge
• Firefox
• Opera
• Safari

Note -: These major browsers fully support the background-color property across various versions, ensuring consistent rendering of background colors on web pages.