CSS Backgrounds

.hero {
  background-color: #111;
}

.hero {
  background-image: url("photo.jpg");
  background-size: cover;      /* cover | contain | 100% auto */
  background-position: center;
  background-repeat: no-repeat;
}

/* Linear gradient */
.banner {
  background: linear-gradient(135deg, #D62828, #5B3FEF);
}

/* Left to right */
.fade {
  background: linear-gradient(to right, #000, transparent);
}

/* Radial gradient */
.glow {
  background: radial-gradient(circle, #5B3FEF, #111);
}

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