transparent
It is the default value. It specifies the transparent background-color.
Syntax:
element {
background-color:transparent;
}
Example: In this example the body and headings (<h1> and <h2>) have a transparent background, allowing the page background color (if any) to show through.
<!DOCTYPE html>
<html>
<head>
<title>background-color property</title>
<style>
body {
background-color: transparent;
text-align: center;
}
h1 {
background-color: transparent;
}
h2 {
background-color: transparent;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h2>background-color: transparent;</h2>
</body>
</html>
Output:
CSS background-color Property
The background-color CSS property sets the background color of an element. You can specify colors using named colors, hexadecimal values, RGB, RGBA, HSL, or HSLA. This property affects the padding and content areas, providing a solid color backdrop for the element’s content.
Syntax:
element {
background-color property
}
Default value: It has a default value i.e. transparent.
Property Values:
- color: It defines the background color value or color codes. For example: A color name can be given as: “green” or HEX value as “#5570f0” or RGB value as “rgb(25, 255, 2)”.
Syntax:
element {
background-color: color_name;
}
Example: In this example The background-color CSS property is used to set the background color of elements. Here, it styles the body in green, <h1> in blue, and <h2> in black with contrasting text colors.
<!DOCTYPE html>
<html>
<head>
<title>background-color property</title>
<style>
body {
text-align: center;
background-color: green;
}
h1 {
color: white;
background-color: blue;
}
h2 {
color: white;
background-color: black;
}
</style>
</head>
<body>
<h1>w3wiki </h1>
<h2>background-color: color_name;</h2>
</body>
</html>
Output: