Colors & Backgrounds

Backgrounds

.hero {
  background-color: #0f1e2e;
  background-image: url("hero.jpg");
  background-size: cover;       /* fill the box, cropping if needed */
  background-position: center;
  background-repeat: no-repeat;
}

Property	Common values
`background-size`	`cover`, `contain`, `100px`, `50%`
`background-position`	`center`, `top right`, `50% 20%`
`background-repeat`	`repeat`, `no-repeat`, `repeat-x`
`background-attachment`	`fixed` for a parallax effect

The shorthand

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