CSS background-color Property

CSS background-color Property

The background-color property in CSS sets the background color of an element.

1. Syntax

selector {
  background-color: value;
}

2. Accepted Values

Value	Description
color name	Uses predefined color names (e.g., red, blue, green).
hex code	Defines a color using hexadecimal values (e.g., #ff5733).
rgb()	Defines a color using red, green, and blue values (e.g., rgb(255, 87, 51)).
rgba()	Includes transparency with an alpha value (e.g., rgba(255, 87, 51, 0.5)).
hsl()	Uses hue, saturation, and lightness (e.g., hsl(10, 100%, 50%)).
hsla()	Includes transparency with an alpha value (e.g., hsla(10, 100%, 50%, 0.5)).
transparent	Makes the background completely see-through.
inherit	Inherits the background color from the parent element.

3. Example – Using Named Colors

.box {
  width: 200px;
  height: 100px;
  background-color: blue;
}

✅ The background color of It .box will be blue.

4. Example – Using Hex Codes

.box {
  background-color: #ff5733;
}

✅ The background color will be orange-red (#ff5733).

5. Example – Using RGB & RGBA

.box {
  background-color: rgb(255, 87, 51);
}

.box-transparent {
  background-color: rgba(255, 87, 51, 0.5);
}

✅ rgba(255, 87, 51, 0.5) adds 50% transparency.

6. Example – Using HSL & HSLA

.box {
  background-color: hsl(200, 100%, 50%);
}

.box-transparent {
  background-color: hsla(200, 100%, 50%, 0.5);
}

✅ The background color is bright blue, with hsla() adding transparency.

7. Example – Using transparent

.box {
  background-color: transparent;
}

✅ The background is completely see-through.

8. Best Practices

✔ Use rgba() or hsla() for transparency effects.
✔ Use HEX or RGB for better cross-browser support.
✔ Combine with background-image for layered effects.