CODEWITHSUNDEEP
htmlcssparallaxweb-development-server
Kenny Johnson
Kenny Johnson

Reputation: 472

Make parallax work on iOS without background-attachment:fixed

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

Upvotes: 4

Views: 2763

Answers (1)

nicholas Angelo
nicholas Angelo

Reputation: 21

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.

Upvotes: 2

Related Questions