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 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: ``` #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…

Accepted Answer

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.

Background size on iOS

Solution

Problem