html

Background-color in CSS

As the name itself states the background-color property determines the background-color of any element. It can be used to change the background-color of a single element, multiple elements, entire page, or entire document.

In CSS various values can be assigned to the background-color property as listed bellow:

  • A color name i.e. red, yellow, green, etc.,
  • The hexadecimal color values i.e. #ff0000, 00ff00, etc.
  • The rgb value like rgb (255, 0, 0), etc.
  • The HSL values such as (55, 45, 55), etc.

This write-up will present a general overview of the background-color property. It will discuss how to assign different values to the background-color property.

How To Set background-color Using Color Names

In CSS we can set the Background-color using color names such as red, green, blue, etc.

Example 1: The below-given example will set the background-color for the entire page using “color-name value”:

<html>
<head>
<title>background-color CSS</title>
<style>
body{
    background-color: lightcoral;
}
</style>
</head>
<body>
    <h1>Welcome to linuxhint.com</h1>
    <p>Sample Paragraph<p>
</body>
</html>

The above snippet specifies the background-color using internal CSS. It will display the following output:

How To Set background-color Using Hexadecimal Color Code

In CSS the background-color can be assigned using hexadecimal color values. The hexadecimal color value consists of a “#” symbol followed by three or six digits code.

Example 2: The below-given snippet utilizes the hexadecimal color code to style the background-color of paragraph tags using internal style and background-color of <h1> using inline CSS:

<html>
<head>
<title>background-color CSS</title>
<style>
p{
    background-color: #ff6347;
}
</style>
</head>
<body>
    <h1 style="background-color: #daa520">background-color Using HEX Color Code</h1>
    <p>Welcome to linuxhint.com</p>
    <p>Welcome to linuxhint.com</p>
</body>
</html>

As a result, it produces the following output:

How To Set background-color Using RGB Color Code

RGB color codes can be used to set the background-color of an element. The RGB color code determine the color using numeric values ranges from 0 to 255. The RGB color utilizes three main colors i.e. (red, green, and blue) to generate different color combinations.

Example 3: Following example will create an external CSS file to set the background color of various elements. It utilizes the RGB color codes to apply the background-color.

CSS File:

body {
    background-color: rgb(212, 212, 212);
}

h1 {
    background-color:rgb(0, 144, 158);
}

p{
    background-color: rgb(137, 210, 236);
}

HTML file:

<html>
<head>
<title>background-color CSS</title>
<link rel="stylesheet" href="external.CSS">
</head>
<body>
    <h1>background-color Using RGB Color Code</h1>
    <p>Welcome to linuxhint.com</p>
    <p>Welcome to linuxhint.com</p>
    <p>Welcome to linuxhint.com</p>
</body>
</html>

The above code will generate the following outcome:

How To Set background-color Using RGBA Color Code

An additional parameter alpha (A) can be added to the RGB color code which determines the opacity of a color. The value of the alpha parameter lies between 0.0 to 1.0.

Example 4: The below given code extended the previous example a little bit and added the value for the alpha parameter as well:

CSS File:

body {
    background-color: rgba(212, 212, 212, 0.1);
}

h1 {
    background-color:rgba(0, 144, 158, 0.1);
}

p{
    background-color: rgba(137, 210, 236, 0.1);
}

HTML File:

<html>
<head>
<title>background-color CSS</title>
<link rel="stylesheet" href="external.CSS">
</head>
<body>
    <h1>background-color Using RGB Color Code</h1>
    <p>Welcome to linuxhint.com</p>
    <p>Welcome to linuxhint.com</p>
    <p>Welcome to linuxhint.com</p>
</body>
</html>

The only change in the previous (RGB) and this (RGBA) example is alpha parameter. Compare the both outputs you will notice a clear difference:

That’s how the alpha parameter worked.

How To Set background-color Using HSL Color Code

CSS supports another color convention named HSL. HSL sets a color with respect to hue, saturation, and lightness.

Example 5: Consider the following code that specifies how HSL convention works:

<html>
<head>
<title>background-color CSS</title>
<style>
p{
    background-color: hsl(56, 43%, 51%);
}
h1{
    background-color: hsl(5, 45%, 45%);
}

</style>
</head>
<body>
    <h1>background-color Using HSL Color Code</h1>
    <p>Welcome to linuxhint.com</p>
    <p>Welcome to linuxhint.com</p>
</body>
</html>

The above code implemented the background-color on <p> and <h1> element using HSL color convention. It will display the following output:

How To Set background-color Using HSLA Color Code

The alpha parameter can be utilized with the HSL color convention to specify the opacity of a color.

Example 6: Let’s extend the above-given code a bit more and add the alpha parameter in the HSL:

<html>
<head>
<title>background-color CSS</title>
<style>
p{
    background-color: hsla(56, 43%, 51%, 0.7);
}
h1{
    background-color: hsla(5, 45%, 45%, 0.3);
}

</style>
</head>
<body>
    <h1>background-color Using HSLA Color Code</h1>
    <p>Welcome to linuxhint.com</p>
    <p>Welcome to linuxhint.com</p>
</body>
</html>

The output will prove that the alpha parameter added the opacity to the background-color as shown below:

Conclusion

CSS utilized a background property to implement the background-color on an element, page, etc. The background-color can be assigned using multiple ways like by specifying the color name, hexadecimal value, RGB value, etc.

This write-up considered the multiple color conventions for the background-color property. It provides a detailed guide about how to apply the background-color using “Color name”, “hexadecimal values”, “RGB, RGBA color codes”, and  “HSL, HSLA color codes”.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.