Background size on iOS

Question

I\'ve spent the morning doing research on the following issue. I\'m making a one page site, using a lot of images. I\'m aware that Safari is known for its weird handling of

Answer 1

Short answer: you can’t (for now).

You can play with @media screen and (max-width: 1024px) {} but for now iPad Pro have resolution more then ordinary monitors.

I offer you to disable fixed attachment for mobiles via this way:

Main CSS file:

.parallax {
   background-attachment: fixed;
   background-size: cover;
}

Main HTML

<script type="text/javascript">
   if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi)) {
      document.write("<link rel=\"stylesheet\" href=\"fixparallax.css\" />");
   }
</script>

Additional fixparallax.css

.parallax {
   background-attachment: scroll !important;
}

Answer 2

Use another div with position:fixed to make the background fixed.

Like this: http://codepen.io/anon/pen/OVebNg

JADE

.fixed
  .bgcover

SCSS

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  .bgcover {
      background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg');
      background-size: cover;
    width: 100%;
    height: 100%;
  }
}

Hope this help.