Background fix hack for iOS Safari with iPad pro

CSS only with no need for JavaScript

HTML

<div class="background"></div>
<div class="content">
and here is a normal container with content
</div>

CSS

/** http://placekitten.com/g/1920/1080 */
.background {
    background-image: url('http://placekitten.com/g/1921/1080');
    /*
    background-size: cover OR 100% (height will be set automatically) OR 100% 100% (strech image)
    Safari might have problems with "background-size: cover" and "background-attachment: fixed". Fix: set "background-size" to "100%" or "100% 100%"
    */
    background-size: cover;
    background-attachment: fixed; 
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

/* ipad pro optional */
/* portrait */
@media only screen 
  (min-device-width : 1024px)
  and (max-device-width : 1024px)
  and (min-device-height : 1366px)
  and (max-device-height : 1366px)
  and (min-width: 1024px)
  and (max-width: 1024px) {
    .background {
      background-image: url('http://placekitten.com/g/1024/1366');
      background-size: 100%;
    }
}
/* landscape */
@media only screen 
  (min-device-width : 1024px)
  and (max-device-width : 1024px)
  and (min-device-height : 1366px)
  and (max-device-height : 1366px)
  and (min-width: 1366px)
  and (max-width: 1366px) {
    .background {
      background-image: url('http://placekitten.com/g/1366/1024');
      background-size: 100%;
    }
}

/* content needed for scroll effect */
.content {
    background-color: rgba(255, 255, 255, 0.5);
    height: 200em;
    margin-top: 20em;
    padding: 1em;
}

JavaScript

/** no js needed */