Probleme de résolution sur mobile

Oui bonjour j'ai n gros problème avec un effet parrallax mouse mouvement , tout ce passe bien sur la version bureau mais quand je regarde la version mobile les image de mon parallax son couper par l'ecran au lieu de ce redimensionner a la résolution de l'écran .

url de mon site http://boileau-quebec.e-monsite.com/


mon code css


.parallax {
position: relative;
width: 100%;
height: 660px;
overflow: hidden;
left: 0;
}
.water {
position: absolute;
width: 100%;
height: 660px;
left:0;
background-repeat: no-repeat;
background-position: top center;
}
.water-layer1 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/layer304.png); no-repeat center fixed;
}
.water-layer2 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/layer303.png);
}
.water-layer3 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/arbre-1.png);
}
.water-layer4 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/nuage-1.png);
}
.water-layer5 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/z21-1.png);
}
.water-layer6 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/popcorn5.png);
}
.water-layer7 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/popcorn4.png);
}
.water-layer8 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/popcorn3.png);
}
.water-layer9 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/popcorn2.png);
}
.water-layer10 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/popcorn1.5.png);
}
.water-layer11 { background-image: url(http://boileau-quebec.e-monsite.com/medias/images/vague-2.png);
}

mon code pour l'afficher

<div class="parallax">
<div class="water water-layer1">&nbsp;</div>

<div class="water water-layer2">&nbsp;</div>

<div class="water water-layer3">&nbsp;</div>

<div class="water water-layer4">&nbsp;</div>

<div class="water water-layer5">&nbsp;</div>

<div class="water water-layer6">&nbsp;</div>

<div class="water water-layer7">&nbsp;</div>

<div class="water water-layer8">&nbsp;</div>

<div class="water water-layer9">&nbsp;</div>

<div class="water water-layer10">&nbsp;</div>
</div>


et mon code javascript

var currentX = '';
var currentY = '';
var movementConstant = 0.005;
$(document).mousemove(function(e) {
if (currentX == '') currentX = e.pageX;
var xdiff = e.pageX - currentX;
currentX = e.pageX;
if (currentY == '') currentY = e.pageY;
var ydiff = e.pageY - currentY;
currentY = e.pageY;
$('.parallax div').each(function(i, el) {
var movement = (i + 0.001) * (xdiff * movementConstant);
var movementy = (i + 0.002) * (ydiff * movementConstant);
var newX = $(el).position().left + movement;
var newY = $(el).position().bottom + movementy;
$(el).css('left', newX + 'px');
$(el).css('bottom', newY + 'px');
});
});