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 overall size of the element including the padding and border, but not the margin. You can use the CSS background-color property to determine a background color. This is used in such a way as the color property, indicating users can type a color name, enter it in hexadecimal notation or use the RGB method again.
To determine the background color of the web page, you must operate with the tag <body>. In addition, <body> refers to the entire web page, so you can change the background color of the page 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:
The syntax for the background-color property can be written 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 background-color Property Works in CSS?
It is simple to add a background color for HTML elements of a fixed size-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 all kinds of web browsers such as Google Chrome, Mozilla Firefox, IE, and many more.
Examples to Implement CSS background-color
Now, we will see CSS background-color property with the examples as 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 have used the background-color property with the keyword value. It has been written as ‘background-color: deepskyblue;’ for the text which is displayed in sky blue color and heading is displayed with ‘background-color: coral;’ property. Here, deepskyblue and coralcolors are called as keyword values.
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 which is displayed in dark orange color and heading is displayed with ‘background-color: #DC143C;’ property in crimson color. Here, #FF8C00and #DC143Ccolors are called as 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 have used the background-color property with the RGB colors. It has been written as ‘background-color: rgb(165,42,42);’ for the text which is displayed in brown color and heading is displayed with ‘background-color: rgb(50,205,50);’ property in lime green color. Here, rgb(165,42,42)and rgb(50,205,50)colors are called as RGB color model which produces 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 have used the background color property with the HSL values. It has been written as ‘background-color: hsl(19,56%,40%);’ for the text which is displayed in sienna color and heading is displayed with ‘background-color: hsl(32, 100%, 43%);’ property in sign orange color. Here, hsl(19,56%,40%);and hsl(32, 100%, 43%);colors are called as HSL values which produces hue, saturation, lightness of the RGB color model.
Conclusion
In this article, we dealt with the basics of applying background colors to elements with fixed and variable widths using CSS. It is necessary to ensure that the contrast between both the background color and color of the text will be sufficiently good to enable people with low vision conditions to understand the page content.
Recommended Articles
This is a guide to CSS background color. Here we discuss a brief overview of CSS background color and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –
