The background-color property in CSS is used to set the background color of an element. The value can be a named color (for example, “red” or “blue”), a hexadecimal code (for example, “#ff0000” for red or “#0000ff” for blue), an RGB or RGBA value (for example, example, “rgb(255, 0, 0)” for red or “rgba(0, 0, 255, 0.5)” for blue at 50% opacity) or an HSL or HSLA value (eg ” hsl(0, 100%, 50%)” for red or “hsla(240, 100%, 50%, 0.5)” for blue with 50% opacity).
The property can be applied to a specific element using a selector and the style attribute, or to multiple elements in a style sheet using a class or ID selector. Example:
<div style="background-color: red;">This element has a red background</div>
or
.sample-class {
background-color: hsl(120,100%,50%);
}
<div class="sample-class">This element has a green background</div>It’s also possible to set different background color for different element’s states like :hover, :active, :focus etc.
Please see the below example:
.sample-class:hover {
background-color: #4CAF50;
}
<div class="sample-class">This element changes to green background on hover</div>
The CSS background color will take the entire area of the element, if there is any content inside the element, it will be placed on top of the background color.
