background-color

The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.

/* Keyword values */
background-color: red;
/* Hexadecimal value */
background-color: #bbff00;
/* Hexadecimal value with alpha channel */
background-color: #11ffee00; /* 00 - fully transparent */
background-color: #11ffeeff; /* ff - fully opaque */
/* RGB value */
background-color: rgb(255, 255, 128);
/* RGBA value or RGB with alpha channel */
background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */
​​​​​​​
/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

<div id="container">
  <div class="subcontainer">
    <div id="keyword" class="color"></div>
    <div class="caption">skyblue</div>
  </div>
  <div class="subcontainer">
    <div id="hex" class="color"></div>
    <div class="caption">#bbff00;</div>
  </div>
  <div class="subcontainer">
    <div id="rgb" class="color"></div>
    <div class="caption">rgb(240, 220, 180)</div>
  </div>
  <div class="subcontainer">
    <div id="rgba" class="color"></div>
    <div class="caption">rgba(240, 220, 180, 0.5)</div>
  </div>
  <div class="subcontainer">
    <div id="hsl" class="color"></div>
    <div class="caption">hsl(50, 60%, 75%)</div>
  </div>
  <div class="subcontainer">
    <div id="currentcolor" class="color"></div>
    <div class="caption">currentcolor</div>
  </div>
  <div class="subcontainer">
    <div id="transparent" class="color"></div>
    <div class="caption">transparent</div>
  </div>
</div>

#container {
  width: 100%;
  background-color: #F4F7F8;
  display: flex;
  flex-wrap: wrap;
}
.subcontainer {
  border: 1px solid black;
  height: 80px;
  margin: 10px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #dcdcdc;
  background-image:
      linear-gradient(45deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(225deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(225deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(45deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 0 0, -10px -10px;
}
.color {
  width: 100%;
  flex: 1 0 auto;
}
.caption {
  background-color: white;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  color: black;
  font-family: monospace;
  font-weight: bold;
}
#keyword {
  background-color: skyblue;
}
#hex {
  background-color: #bbff00;
}
#rgb {
  background-color: rgb(240, 220, 180);
}
#rgba {
  background-color: rgb(240, 220, 180, 0.5);
}
#hsl {
  background-color: hsl(50, 60%, 75%);
}
#currentcolor {
  background-color: currentcolor;
}
#transparent {
  background-color: transparent;
}

Syntax

The background-color property is specified as a single <color> value.

Values

<color>

Is a CSS <color> that describes the uniform color of the background. Even if one or several background-image are defined, this color can be affect the rendering, by transparency if the images aren't opaque. In CSS, transparent is a color.

Formal syntax

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Examples

HTML

<div class="exampleone">
 Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="exampletwo">
  Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="examplethree">
  Lorem ipsum dolor sit amet, consectetuer
</div>

CSS

.exampleone {
  background-color: teal;
  color: white;
}
.exampletwo {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}
.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

Result

Specifications

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

1. In Internet Explorer 8 and 9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements.

See also

• Multiple backgrounds