title: Background size on iOS
body: <p>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 <code>background-size:cover</code> is not working in conjunction with <code>fixed</code>.</p>
  
  <p>I have 5 pages, all of which have a <code>height</code> or <code>min-height</code> of 100%. The last page is fixed like this:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it's really stretched.</p>
  
  <p>At the same time, page 4 has the following css:</p>
  
  <pre><code>#div4 {
    min-height:100%;
    width:100%;
    background:url(img/portfoliobg.jpg);
    overflow: auto;
    background-size: cover;
  }
  </code></pre>
  
  <p>and this works like a charm.</p>
  
  <p>So, something makes the browser behave really weirdly when combining <code>fixed</code> and <code>cover</code>. Does anyone have a solution to this?</p>