1. css
  2. /properties
  3. /background-color

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:

ValueDescription
transparentThe background is transparent. This is the default value.
<color>The background is painted in a solid color. Valid color values include named colors (e.g. red, blue, green), hexadecimal color codes (e.g. #ff0000, #0000ff, #00ff00), RGB or RGBA color values (e.g. rgb(255, 0, 0), rgba(0, 0, 255, 0.5)), and HSL or HSLA color values (e.g. hsl(0, 100%, 50%), hsla(240, 100%, 50%, 0.5)).

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes