CSS Background Color

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>


.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.

Posts created 494

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top