Updated June 30, 2023
Introduction to CSS background-color Property
The CSS background-color property helps to set an element’s background color. An element’s background is the element’s overall size, including the padding and border, but not the margin. You can use the CSS background-color property to determine a background color. Users can use the color property in various ways, such as typing a color name, entering it in hexadecimal notation, or using the RGB method again.
To determine the web page’s background color, you must operate with the tag <body>. In addition, <body> refers to the entire web page, so you can change the page’s background color by changing its background color.
With the <body> tag, you can specify the background color as:
body{
background-color: grey;
}Here, the body of the HTML page will have a grey background color.
Syntax:
You can write the syntax for the background-color property as shown below:
element_name{
background-color: name_of_color_value;
}For instance,
background-color: red; // this is keyword value
background-color: #FFFFFF; // this is HEXA color value
background-color: hsl(0, 0%, 100%); // this is HSL(hue, saturation, lightness)representation of color keyword value
background-color: rgb(255, 255, 255); // this is keyword value
background-color: transparent; // this is special keyword value
For example, we can set background color of the HTML page as shown below:
body {
background-color: grey;
}How does background-color Property Work in CSS?
Adding a background color for fixed-size HTML elements is, simple-whether in pixels, ems, or percentages. HTML5 does not endorse the bgcolor attribute for the <body> tag, so CSS style has been used to apply the background color. With the help of this property, users can work with hexadecimal values, rgb values, named colors, and transparent values. The CSS background-color property can support web browsers such as Google Chrome, Mozilla Firefox, IE, and many more.
Examples to Implement CSS background-color
Now, we will see the CSS background-color property with the examples described below:
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS background-color Example </title>
<style>
h2 {
background-color: coral;
color: white;
text-align: center;
}
.text {
background-color: deepskyblue;
color: white;
}
</style>
</head>
<body>
<h2> Hello World... </h2>
<br>
<div class = "text">
EDUCBA(Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>Output:
Open the file in a browser, and it will produce the following result:
Explanation: In the above example, we utilized the background-color property with keyword values. We displayed the text in sky blue color by using the keyword value ‘background-color: deepskyblue;’, while for the heading, We applied the ‘background-color: coral;’ property, where the term “coral” is used as a keyword value.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS background-color Example </title>
<style>
h2 {
background-color: #DC143C;
color: white;
text-align: center;
}
.text {
background-color: #FF8C00;
color: white;
}
</style>
</head>
<body>
<h2> Hello World... </h2>
<br>
<div class = "text">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>Output:
Explanation: In the above example, we have used the background-color property with the hexadecimal value for the color. It has been written as ‘background-color: #FF8C00;’ for the text displayed in dark orange color and the heading displayed with ‘background-color: #DC143C;’ property in crimson color. Here, #FF8C00 and #DC143Ccolors are called hexadecimal values.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS background-color Example </title>
<style>
h2 {
background-color: rgb(165,42,42);
color: white;
text-align: center;
}
.text {
background-color: rgb(50,205,50);
color: white;
}
</style>
</head>
<body>
<h2> Hello World... </h2>
<br>
<div class = "text">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>Output:
Explanation: In the above example, we utilized the background-color property with RGB colors. The text appears in brown color because we styled it with the property ‘background-color: rgb(165, 42, 42);’. Conversely, the heading displays a lime green color because we styled it with the property ‘background-color: rgb(50, 205, 50);’. In this case, we refer to the colors rgb(165, 42, 42) and rgb(50, 205, 50) as the RGB color model, which enables us to produce a broad range of colors.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS background-color Example </title>
<style>
h2 {
background-color: hsl(19,56%,40%);
color: white;
text-align: center;
}
.text {
background-color: hsl(32, 100%, 43%);
color: white;
}
</style>
</head>
<body>
<h2> Hello World... </h2>
<br>
<div class = "text">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>Output:
Explanation: In the above example, we utilized the background color property with HSL values. We displayed the text in sienna color using the property ‘background-color: hsl(19, 56%, 40%);’, and the heading appeared in sign orange color with the property ‘background-color: hsl(32, 100%, 43%);’. In this case, the colors hsl(19, 56%, 40%); and hsl(32, 100%, 43%); are referred to as HSL values, which determine the hue, saturation, and lightness of the RGB color model.
Conclusion
In this article, we used CSS to apply background colors to elements with fixed and variable widths. It is necessary to ensure that the contrast between the background color and the color of the text will be sufficiently good to enable people with low vision conditions to understand the page content.
Recommended Articles
We hope that this EDUCBA information on “CSS background-color” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
