Is background-color:none valid CSS ?

Last Updated : 06 Jun, 2022

CSS “background-color:none” is valid. But it is better to specify it as “transparent” instead of “none”.

The CSS background-color property 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: none
}
element
{
  background-color: transparent
}

Example 1: In this example, we are setting the background-color property to “none”(no color) with h1 tag and background:color property to “pink” with an h3 tag.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>background-color property</title> 
        <style>             
            h1 { 
                color:black; 
                background-color:none; 
            } 
            h3 { 
                color:black; 
                background-color:pink; 
            } 
        </style> 
    </head> 
    <body> 
        <h2 style="color:green">GeeksforGeeks</h2> 
        <h1> Background color with none</h1> 
        <h3> Background color with pink</h3>     
    </body> 
</html>                                 

Output:

Example 2: In this example, we are setting the background-color property to transparent(no color) with an h1 tag and background-color property to pink with an h3 tag.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>background-color property</title> 
    <style>             
        h1  
        { 
          color:black; 
          background-color:transparent; 
        } 
        h3  
        { 
          color:black; 
          background-color:pink; 
        } 
    </style> 
</head> 
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <h1>Background color with transparent </h1> 
    <h3>Background color with pink </h3>     
</body> 
</html>                                 