My parallax scrolling is not working on mobile devices, both android and iOS. The code works great for desktop but not for mobile, be it any browser. Background images are not scrolling in parallax effect. You can check it here https://dkpyk75z6sfdo.cloudfront.net/

Here goes the CSS code,

.home {

background: url(assets/images/img1.jpg) no-repeat center center fixed;

display: table;

height: 100%;

position: relative;

width: 100%;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

#information {

background: url(assets/images/b1.jpeg) no-repeat center center fixed; 

display: table;

height: 100%;

z-index: -1;

position: relative;

width: 100%;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

#information2 {

background: url(assets/images/ab9.jpeg) no-repeat center center fixed; 

display: table;

height: 100%;

z-index: -1;

position: relative;

width: 100%;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

#information3 {

background: url(assets/images/c4.jpg) no-repeat center center fixed; 

display: table;

height: 100%;

z-index: -1;

position: relative;

width: 100%;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

HTML code

<!-- first section - Home -->

<div class=home>

<div class=centered>

<h1>PARALLAX WEB DESIGN</h1>

</div>

</div>

<!-- /first section -->    



<!-- second section -->

<div id=information>

<div class=centered>

        <h1>SECTION 1</h1>

</div>

</div>

<!-- /second section -->

And so on