I'm working on a responsive website with alternating sections featuring fixed background images where the content is meant to scroll over the image. However, I'm facing an issue on iOS where the background image zooms into a small section and scales up to fit the content div, resulting in a grey background. How can I resolve this issue and make scrolling sections over fixed backgrounds work on iPhone browsers?
Below is the code I'm currently using 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 removed all the responsive elements and narrowed down the issue to the background image scaling to the entire page instead of just the section it should be contained in, specifically on iOS browsers. For example, the background of the 'about' section scales to cover all three sections, and the magnified portion shows in the first section. Deleting the other sections resolves the sizing problem.
<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