CSS Background

The CSS background properties are used to add background effects for elements.

CSS background-color

The background-color property specifies the background color of an element.

The background color of a page is set like this:

body {
  background-color: lightblue;
}

With CSS, a color is most often specified by:

• a valid color name – like “red”
• a HEX value – like “#ff0000”
• an RGB value – like “rgb(255,0,0)”

Other Elements

You can set the background color for any HTML elements:

Example

Here, the <h1>, <p>, and <div> elements will have different background colors:

 h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 – 1.0. The lower value, the more transparent:

Example

div {
  background-color: green;
  opacity: 0.3;
}

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}