Solution 1 :

Use position: fixed instead and then some placement adjustments.

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

This, with some z-index, could get the effect on any device. It is unfortunate that ios does not work with background-attachment: fixed but there is always another way.

Problem :

Does anyone know if there is a reasonable way to make this parallax background scrolling effect work on iOS devices? Here is the page I am working on.
http://districtdentalontheouachita.com/new/

Right now all I am doing to achieve this effect is to used background-attachment: fixed;

Here is the css for my sections

.section1 {
  width:100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-image: url("images/dental1.jpg");
  background-attachment:fixed;
}

The client really wants this effect but I cant make it work on iOS…

Comments

Comment posted by edit

As it’s currently written, your answer is unclear. Please

By