CSS background-color Property

The background-color property is used to specify the background color of the element.

The background covers the total size of the element with padding and border but excluding margin.

CSS background-color property has a default value called transparent.


element {
    background-color: color|transparent|initial|inherit;

Property Values

colorSpecifies the background color. A color name can be given as: “green” or HEX value as “#5570f0” or RGB value as “rgb(25, 255, 2)”.
transparentSpecifies that the background color should be transparent. This is default value.
initialSets this property to its default value.
inheritInherits this property value from its parent element.
CSS background-color Property values


<!DOCTYPE html>

    <title>background-color property</title>
        body {
            text-align: center;
            background-color: green;

        h1 {
            color: white;
            background-color: blue;

        h2 {
            color: white;
            background-color: black;

    <h2>background-color: color_name;</h2>

CSS background-color Property example output