Background size on iOS

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 background-attachment:fixed, but that’s working fine; my problem is background-size:cover is not working in conjunction with fixed.

I have 5 pages, all of which have a height or min-height of 100%. The last page is fixed like this:

  • Load different CSS stylesheet with javascript
  • Styling input buttons for iPad and iPhone
  • iOS: disable bounce scroll but allow normal scrolling
  • Why is iOS Safari adding extra letter-spacing?
  • no status bar in phone gap?
  • disable viewport zooming iOS 10+ safari?
  • #div5 {
      height:100%;
      width:100%;
      position: relative;
      background-image: url("img/background.jpg");
      background-attachment:fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    

    On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it’s really stretched.

    At the same time, page 4 has the following css:

    #div4 {
      min-height:100%;
      width:100%;
      background:url(img/portfoliobg.jpg);
      overflow: auto;
      background-size: cover;
    }
    

    and this works like a charm.

    So, something makes the browser behave really weirdly when combining fixed and cover. Does anyone have a solution to this?

    Solutions Collect From Internet About “Background size on iOS”

    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.