Header-Image

Ein Hero-Image-Header mit Parallax-Effekt

.inside-header {
    background-image: url(headerimage.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /*height: 300px;*/
    min-height: 500px;

    background-attachment: fixed;       /* Parallax-Effekt  */
}

Über eine Media-Query kann ggf. bei einer anderen Bildschirmauflösung oder -größe ein anderes Bild verwendet werden.

.img {
  background-image: url(examples/images/image-384.jpg); 
}
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  .img {
    background-image: url(examples/images/image-768.jpg);
  }
}
.img {
  background-image: url(medium.jpg);
}
@media (min-width: 800px) {
  .img {
    background-image: url(large.jpg);
  }
}
@media (min-width: 1000px) {
  .img {
    background-image: url(extralarge.jpg);
  }
}

Fundstelle: https://css-tricks.com/responsive-images-css/