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 the browser behave really weirdly when combining `fixed` and `cover`. Does anyone have a solution to this?