CSS - background-color Property
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
To Continue Learning Please Login
Login with Google