CSS background-color Property

CSS background-color property sets the background color for HTML Element(s).

The syntax to specify a value for background-color property is

background-color: value;

The following table gives the possible values that could be given to background-color property.

ValueDescriptionExample
colorAny valid CSS color value.background-color: red;background-color: #f00;background-color: rgb(25, 220, 85);
transparentSets background color to transparent.background-color: transparent;
initialSets background color to default value.background-color: initial;
inheritInherits background color value from its parent element.background-color: inherit;

Examples

In the following examples, we apply background-color using different types of allowed values for background-color property.

ADVERTISEMENT

background-color with CSS Color Values

In the following example, we take multiple div elements, and set each of the element with different kind of allowed CSS Color Value. Refer CSS Color Values tutorial.

index.html

background-color for different HTML elements

In the following example, we take some different HTML elements like h1, p, a, span, and pre, and set background-color for these HTML elements.

index.html

Conclusion

In this CSS Tutorial, we learned about background-color property, and how to use this property for HTML Elements, with examples.