视差背景图像似乎被削减

Question

我正在尝试使用jquery mousemove进行背景视差效果，但是当我调整计算机屏幕大小时图像看起来像剪切时我的背景图像有问题。我怎么能解决这个问题，任何人都可以帮助我？

DEMO

<section class="landing">

<div class="shapes shapes1"></div>

<div class="shapes shapes2"></div>

</section>

JS

$('.landing').mousemove(function(e){
    var width = $(this).width() / 2;
    var height = $(this).height() / 2;
    var amountMovedX = ((width - e.pageX) * -1 / 12);
    var amountMovedY = ((height - e.pageY) * -1 / 12);

    var amountMovedX2 = ((width - e.pageX) / 8);
    var amountMovedY2 = ((height - e.pageY) / 8);

    $('.shapes1').css('marginLeft', amountMovedX);
    $('.shapes1').css('marginTop', amountMovedY);

    $('.shapes2').css('marginLeft', amountMovedX2);
    $('.shapes2').css('marginTop', amountMovedY2);
});