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”:
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:
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:
background-color: rgb(212, 212, 212);
}
h1 {
background-color:rgb(0, 144, 158);
}
p{
background-color: rgb(137, 210, 236);
}
HTML file:
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:
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:
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:
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:
<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”.
from https://ift.tt/qZwycQd
![How two Build a House in Minecraft [Step by Step]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s5YsooZvEIFDEm2tr6fz0iTYnHiwE64JJy8hTTQbKnnv_gYR8IT4oDI6ESok80JoL4E7DVnDqitrGkJlJmPYpiwhes09Me-JvuPmznw9Uk5-vnoffoaW6vj1g0i0WQPQkX5gQEh446uTS2SgOMucAQqq8eHeGhNiUwuSML9g=w100)
0 Comments