My problem was at the beginning background-attachment: fixed for IOS, well i found this solution with the css code, then a second problem had developed, maybe you have a second solution for me. I have four parallaxes on the site and I have this code for CSS Because I have four parallaxes and I can't change the image or I can't say that in css that I want that first, then the next one and so on, because of the z-index! If you could answer me I would be very grateful. What can I do?
.element1{
background-attachment: scroll;
}
@media only screen and (min-width: 64.063em) {
.element1 {
background-attachment: fixed;
}
}
.parallaxsection1::before{
content: ' ';
display: block;
background-image: url("https://i.stack.imgur.com/aH5zB.jpg");
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0; bottom: 0; left: 0; right: 0;
position: fixed;
z-index: -11;
}
.parallaxsection1::before{
content: ' ';
display: block;
background-image: url("https://i.stack.imgur.com/XZ4V5.jpg");
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0; bottom: 0; left: 0; right: 0;
position: fixed;
z-index: -11;
}<section class="parallaxsection1" >
<div class="element1" >
</div>
</section>
<section class="parallaxsection2" >
<div class="element1" >
</div>
</section>
<section class="parallaxsection3" >
<div class="element1" >
</div>
</section>
<section class="parallaxsection4" >
<div class="element1" >
</div>
</section>