3

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

Kenny Johnson
  • 452
  • 5
  • 15

1 Answers1

2

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.

ouflak
  • 2,458
  • 10
  • 44
  • 49
nicholas Angelo
  • 21
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 22 '21 at 16:37