title: How do I create a fixed background with scroll for a responsive site?
body: <p>I have a responsive site where each alternating section has a fixed background image, and the content is supposed to scroll over the image. Right now, on iOS, it zooms in to a small section of the image and scales it up to fit the content div (I basically end up with a big grey background). How can I make scrolling sections over a fixed background work on the iPhone browsers as well? </p>
  
  <p>Here's my current code for the background:</p>
  
  <pre><code>.scroll-background {
    background: url("../imgs/misc.jpeg") no-repeat top center fixed;
    background-size: cover;
  }
  .scroll-background2 {
    background: url("../imgs/misc2.jpeg") no-repeat top center fixed;
    background-size: cover;
  }
  .center{
    padding: 0 2em;
    margin: 0;
    position: relative;
    top: 50%;
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <p>***EDIT
  I've taken out all of the responsive stuff, and I'm finding the issue to be that the image is scaling to the entire page instead of just the section that it should be contained to, but it's only happening when using browsers on iOS. E.g. the background image for the 'about' section is scaling to cover all three sections, and then the magnified portion of the background shows in the first section. If I delete the other sections, the image scales down to the correct size.</p>
  
  <pre><code>&lt;body id="top"&gt;
        &lt;section id="about"&gt;
          &lt;div class="scroll-background center"&gt;
              &lt;p&gt;
                Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu.
              &lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
  
        &lt;section id="skills"&gt;
          &lt;div class="center"&gt;
              &lt;p&gt;
                Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu.
              &lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
  
        &lt;section id="portfolio"&gt;
          &lt;div class="scroll-background2 center"&gt;
              &lt;p&gt;
                Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu. 
              &lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>Thanks</p>