background-color

Definition

The background-color property in CSS sets the background color of an element. It can be used to specify a solid color, a gradient, or a transparent background.

Examples

Setting the background color to a named color:

.red {
  width: 200px;
  height: 200px;
  background-color: red;
}

Setting the background color to a hexadecimal color code:

.blue {
  width: 200px;
  height: 200px;
  background-color: #0000ff;
}

Setting the background color to a RGB color value:

.green {
  width: 200px;
  height: 200px;
  background-color: rgb(0, 128, 0);
}

Setting the background color to a RGBA color value:

.transparent {
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.5);
}

Values

The background-color property in CSS has the following values:

Best Practices

• Use background-color to specify the color of the background of an element.
• The default value for background-color is transparent, which means that the background is transparent and any elements behind it will be visible.
• You can use any valid CSS color value as the value for background-color, including named colors, hexadecimal color codes, RGB or RGBA color values, and HSL or HSLA color values.
• You can use background-color in combination with other background properties, such as background-image, background-position, and background-clip, to create more complex and customized backgrounds.
• Use a high-contrast color combination for text and background colors to ensure that the text is easy to read.

Browser Compatibility