Property background

A shorthand property for all the background-*
properties.

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
}

Multiple Backgrounds

The background property can have one or more
layers, separated by a comma. If the size of
multiple backgrounds is the same, one of them
will cover the other background.

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat, 
              url(cool.jpg) center/50px 50px no-repeat;
}

Solid Colors

.hero {
  background: linear-gradient(#3c88ec, #3c88ec);
}

Blending Multiple Backgrounds

.hero {
  background: linear-gradient(#000, #000),
    url("landscape.jpg") center/cover;
  background-blend-mode: color;
}

Examples

.hero {
  background: linear-gradient(
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.15)
    ), url("landscape.jpg") center/cover;
}

.hero {
	background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}