Parallax effect works in browser but not in mobile - html

Question

I have added a parallax effect to my image gallery section in my website. The effect works great in normal desktop and responsive mode in the browsers. However, when I try to view the same in my mobile (iPhone 6), the background in the section does not stay fixed, but rather extends for the whole content of that section , making the background very zoomed in and pixelated.
This my html :
<section id="projects">
<div class="parallax">
<div class="container" style="padding-bottom: 30px;">
<div class="row">
<h3 class="section-header-inverse wow fadeInUp" data-wow-delay="200ms" data-wow-duration="500ms">Our Projects</h3>
</div>
<div class="row">
<div class="container">
<div class="gallery">
<div class="row">
<div class="container">
<div class="col-md-12">
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-12">
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-12">
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
This is the css for this section :
#projects {
text-align: center;
padding-bottom: 2%;
}
/*Project Section CSS*/
.parallax {
background-image: url('../images/backgrounds/bg.jpg');
/* Set a specific height */
/*height: 600px;*/
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.gallery img {
max-width: 100%;
max-height: 100%;
}
.gallery .row {
padding-bottom: 10px;
}
#media (max-width: 767px) {
.gallery .thumbnail {
padding-bottom: 7px;
}
}
.gallery .thumbnail {
-webkit-transition: all 150ms ease-out;
-moz-transition: all 150ms ease-out;
-o-transition: all 150ms ease-out;
transition: all 150ms ease-out;
}
.gallery .thumbnail:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in;
}
I even tried to add vendor prefixes to the properties. But still it does not work. Please help me to get this working as expected.
The website can be accessed here

Answer 1

I am showing an example which works on every devices i.e. IPhone, IPad, Android, windows. The Methodology is different as you can see.
<!DOCTYPE html>
<html>
<head>
<title>Parallax</title>
</head>
<style>
.section-one {
position:relative;
height:662px;
}
.section-one:before {
content:'';
background:blue url('2.jpg') no-repeat;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
}
</style>
<body>
<section class="section-one"></section>
</body>
</html>