How can we fix "background-attachment: fixed" in mobile devices for parallax designs?

Question

I'm implementing parallax scrolling in my website, but it is not working in the mobile devices, I don't know how to implement it for mobile devices. I think this is because, the mobile displays are touch screens, so we have to use fingers to scroll where as in PC we can scroll with mouse. Thanks in advance.

.section1 {
  background: url(https://hd.unsplash.com/photo-1465420961937-e0eba4dda519) no-repeat fixed center;
  width: 100%;
  height: 500px;
}
.section2 {
  background: url(https://hd.unsplash.com/photo-1462121457351-9fb0f5622b72) no-repeat fixed center;
  width: 100%;
  height: 500px;
}
.section3 {
  background: url(https://hd.unsplash.com/photo-1465420961937-e0eba4dda519) no-repeat fixed center;
  width: 100%;
  height: 500px;
}

<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>

Please provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) as a snippet - that way we can try your code on mobile devices. — andreas, Aug 06 '16 at 20:34
Sorry but I can't see any implementation of parallax scrolling in your code... — andreas, Aug 06 '16 at 22:35
@Andreas it is just a basic parallax implementation using fixed background — Naresh, Aug 06 '16 at 22:37

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

Ok, the background: fixed; rule does indeed not work on mobile (webkit) browsers. See this question for a possible workaround.

edited May 23 '17 at 12:22

Community

1
1

answered Aug 06 '16 at 23:07

andreas

16,357
12
72
76

But I heard that there are some plugins to do this in both Android and apple products – Naresh Aug 07 '16 at 22:43

How can we fix "background-attachment: fixed" in mobile devices for parallax designs?

1 Answers1