CSS - background-color Property

Quiz

CSS background-color property is used to set color for the entire background of an element.

Different formats for specifying the color can be used such as: predefined color names, hexadecimal color codes, RGB color values etc.

Syntax

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

Property Values

Value	Description
color	This specifies background color.
transparent	This specifies the background color must be trasparent.This is default value.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of Background Color Property

Below are described some examples that explain how the background-color property works. Color values in different formats have been used.

Setting Background Color using Color Names

We can directly give color names to the background-color property. In the following example 'red' color has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            border: 1px solid black;
            height: 100px;
            width: 100px;
            padding:1%;
        }

        .color-name {
            background-color: red;
        }
    </style>
</head>

<body>
    <h2>CSS background-color Property</h2>
    <div class="color-name">
        <h3>Tutorialspoint</h3>
    </div>

</body>

</html>

Setting Background Color using RGB Values

We can give rgb values to the background-color property. In the following example 'pinkish' color (rgb:(201, 76, 76)) has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            border: 1px solid black;
            height: 100px;
            width: 100px;
            padding:1%;
        }

        .rgb-value {
            background-color: rgb(201, 76, 76);
        }
    </style>
</head>

<body>
    <h2>CSS background-color Property</h2>
    <div class="rgb-value">
        <h3>Tutorialspoint</h3>
    </div>
</body>

</html>

Setting Background Color using Hexadecimal Values

We can give hexadecimal values to the background-color property. In the following example 'lightblue' color (hexa: #92a8d1) has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            border: 1px solid black;
            height: 100px;
            width: 100px;
            padding:1%;
        }

        .hexa-value {
            background-color: #92a8d1;
        }
    </style>
</head>

<body>
    <h2>CSS background-color Property</h2>
    <div class="hexa-value">
        <h3>Tutorialspoint</h3>
    </div>
</body>

</html>

Setting Background Color using HSL Value

We can give hsl values to the background-color property. In the following example 'lightgreen' color (hsl:(89, 43%, 51%)) has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            border: 1px solid black;
            height: 100px;
            width: 100px;
            padding:1%;
        }

        .hsl-value {
            background-color: hsl(89, 43%, 51%);
        }
    </style>
</head>

<body>
    <h2>CSS background-color Property</h2>
    <div class="hsl-value">
        <h3>Tutorialspoint</h3>
    </div>
</body>

</html>

Setting Transparent Background Color

To make the background transparent, we can assign the transparent value to the background-color property as done in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            display: inline-block;
            border: 1px solid black;
            height: 100px;
            width: 100px;
            padding:1%;
        }

        .transparent {
            background-color: transparent;
        }
    </style>
</head>

<body>
    <h2>CSS background-color Property</h2>
    <div class="transparent">
        <h3>Tutorialspoint</h3>
    </div>

</body>

</html>

Supported Browsers

Property
background-color	43.0	10.0	16.0	9.0	30.0

Print Page