How do I create a fixed background with scroll for a responsive site?

Question

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?

Here's my current code for the background:

.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%;
}

and the html:

***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.

<body id="top">
      <section id="about">
        <div class="scroll-background center">
            <p>
              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.
            </p>
        </div>
      </section>

      <section id="skills">
        <div class="center">
            <p>
              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.
            </p>
        </div>
      </section>

      <section id="portfolio">
        <div class="scroll-background2 center">
            <p>
              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. 
            </p>
        </div>
      </section>
    </body>

Thanks

Need your HTML and at leas the CSS of the surrounding elements — theblindprophet, Apr 07 '16 at 02:09
I think you might need to show more of you're code, specifically the responsive stuff as I have a feeling that's what is causing the image to scale badly. — Flatlyn, Apr 07 '16 at 02:42
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, but it's only happening on iOS. — sasha, Apr 07 '16 at 03:42

score 0 · Accepted Answer · edited May 23 '17 at 10:34

It looks like the problem is being caused by a combination of the background-attachment: fixed; and background-size: cover; properties you've set.

Note: To clarify for other's who might be reading this and thinking "I can't see the background-attachment: fixed; property in the OP's question...". This property has been set inline in the background: ... no-repeat top center fixed;. You can see it is the last property set at the end.

Back to the OP's question: iOS has an issue preventing background-size: cover; and background-position: fixed; from being used together. caniuse.com actually cites an existing Stack Overflow question as a workaround.

Hopefully this helps :)

How do I create a fixed background with scroll for a responsive site?

1 Answers1