CSS | background-color Property - GeeksforGeeks

29 Oct, 2021
The background-color property in CSS is used to specify the background color of an element. The background covers the total size of the element with padding and border but excluding margin. It makes the text so easy to read for the user.
Syntax:
element {
    background-color property
}
Default value : It has a default value i.e transparent.
Property Values:
Syntax:element {
    background-color: color_name;
}
element {
    background-color: color_name;
}
Example:<!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>Geeksforgeeks </h1>         <h2>background-color: color_name;</h2>         </body> </html>                                
<!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>Geeksforgeeks </h1>         <h2>background-color: color_name;</h2>         </body> </html>                                
Output:
transparent: It is the default value. It specifies the transparent background-color.
Syntax:element {
    background-color:transparent;
}
element {
    background-color:transparent;
}
Example:<!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>GeeksforGeeks</h1>         <h2>background-color: transparent;</h2>         </body> </html>                    
<!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>GeeksforGeeks</h1>         <h2>background-color: transparent;</h2>         </body> </html>                    
Output:
initial: It is used to set the default value. It does not set the background color.
Syntax:element {
    background-color: initial;
}
element {
    background-color: initial;
}
inherit: It is inherit the background-color from it’s parent.
Supported Browsers: The browser supported by css background-color Property are listed below:
Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Safari 1.0
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
hritikbhatnagar2182
CSS-Properties
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?