title: CSS background-size: cover replacement for Mobile Safari
body: <p>Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport.</p>
  
  <p>Obviously <code>background-size: cover</code> behaves unexpectedly on iOS devices. I've seen some examples of how to fix it, but I can't make them work in my situation. Ideally I'd prefer not to add extra <code>&lt;img&gt;</code> tags to the HTML but if it's the only way then I will.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.section {
    margin: 0 auto;
    position: relative;
    padding: 0 0 320px 0;
    width: 100%;
  }
  
  #section1 {
    background: url(...) 50% 0 no-repeat fixed;
    background-size: cover;
  }
  
  #section2 {
    background: url(...) 50% 0 no-repeat fixed;
    background-size: cover;
  }
  
  #section3 {
    background: url(...) 50% 0 no-repeat fixed;
    background-size: cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="section1" class="section"&gt;
      ...
    &lt;/div&gt;
    &lt;div id="section2" class="section"&gt;
      ...
    &lt;/div&gt;
    &lt;div id="section3" class="section"&gt;
      ...
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The question is, how can I get the background image to completely cover the section div, taking into account the variable width of the browser and the variable height of the content in the div?</p>