html, body {
  overflow: auto;
}

body {
  width: 100vw;
  height: 100vh;
  /* picture for a device-width between 0 and 640px in landscape-mode */
  background-image: url(../images/background_640.jpg);
  background-repeat:  no-repeat;
  background-position: center center;
  background-size: cover;
  /* change  */
  background-attachment: fixed;
  /* to  */
  /* position: fixed; */
  /* if your style is not added to body */
}

@media (orientation: portrait),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi) {
  
  body {
    background-image: url(../images/background_1280.jpg);
  }
}

@media (min-width: 640px) and (orientation: landscape) {
  body {
    background-image: url(../images/background_1280.jpg);
  }
}

@media (min-width: 640px) and (orientation: portrait) {
  body {
    background-image: url(../images/background_2560.jpg);
  }
}

@media (min-width: 640px) and (-webkit-min-device-pixel-ratio: 1.5),
       (min-width: 640px) and (min-resolution: 144dpi) {
  
  body {
    background-image: url(../images/background_2560.jpg);
  }
}

@media (min-width: 1280px)  and (orientation: landscape) {
  body {
    background-image: url(../images/background_2560.jpg);
  }
}

@media (min-width: 1280px)  and (orientation: portrait) {
  body {
    background-image: url(../images/background_5120.jpg);
  }
}

@media (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5),
       (min-width: 1280px) and (min-resolution: 144dpi) {
  
  body {
    background-image: url(../images/background_5120.jpg);
  }
}

@media (min-width: 2560px)  and (orientation: landscape) {
  body {
    background-image: url(../images/background_5120.jpg);
  }
}