CSS - background-color



The background-color property of CSS is used to set a solid color for the entire background of an element.

Possible Values

It sets the background color using a variety of color values, such as predefined color names (e.g., "red", "blue", "green"), hexadecimal color codes (e.g., "#FF0000", "#0000FF"), RGB color values (e.g., "rgb(255, 0, 0)"), or HSL color values (e.g., "hsl(0, 100%, 50%)").

  • <color>: Any color value in any valid format.

Applies to

All the HTML elements.

Syntax

Keyword Value

background-color: red;
background-color: indigo;

Hexadecimal Value

background-color: #bbff00; 
background-color: #bf0; 
background-color: #11ffee00; 
background-color: #1fe0;
background-color: #11ffeeff; 
background-color: #1fef; 

RGB Value

background-color: rgb(255 255 128); 
background-color: rgb(117 190 218 / 50%); 

HSL Value

background-color: hsl(50 33% 25%);
background-color: hsl(50 33% 25% / 75%);

Special Keyword Value

background-color: currentcolor;
background-color: transparent;

CSS background-color - <color> Value

The following example demonstrates the different background colors using different CSS background-color values such as color name, RGB, RGBA, HSL, HSLA, transparent −

<html>
<head>
<style>  
   div {
      display: inline-block;
      border: 1px solid black;
      height: 100px;
      width: 100px;
   }
   .color-name {
      background-color: lightblue;
   }
   .rgb {
      background-color: rgb(231, 181, 181);
   }
   .rgba {
      background-color: rgba(149, 224, 149,0.8);
   }
   .hsl {
      background-color: hsl(50 33% 25%);
   }
   .hsla {
      background-color: hsla(50 33% 25% / 0.25);
   }
   .transparent {
      background-color: transparent;
   }
</style>
</head>
<body>
   <h2>background-color</h2>
   <div class="color-name">
      <h3>color name</h3>
   </div>
   <div class="rgb">
      <h3>rgb value</h3>
   </div>
   <div class="rgba">
      <h3>rgba value</h3>
   </div>
   <div class="hsl">
      <h3>hsl value</h3>
   </div>
   <div class="hsla">
      <h3>hsla</h3>
   </div>
   <div class="transparent">
      <h3>transparent</h3>
   </div>
</body>
</html> 
Advertisements