CSS Backgrounds

background-* properties control an element's background color and image.

.hero {
  background-color: #eef2ff;
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

• background-repeat: repeat (default), no-repeat, repeat-x, repeat-y.
• background-position: keywords (center, top right) or lengths.
• background-size: cover (fill the box, cropping if needed), contain (fit inside the box, no cropping), or exact lengths/percentages.

Shorthand

All of the above can be written in one line, in this order — color, image, repeat, position, size (size follows position after a /):

.hero {
  background: #eef2ff url("hero.jpg") no-repeat center / cover;
}

You can also layer several backgrounds by comma-separating them, with the first one drawn on top:

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