параллакс фоновое изображение, кажется, обрезается

Question

Я пытаюсь создать эффект фонового параллакса с помощью jquery mousemove, но у меня проблема с фоновым изображением, когда я изменяю размер экрана компьютера, изображение выглядит как обрезанное. Как я могу исправить это, кто-нибудь может помочь мне здесь?

DEMO

<section class="landing">

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

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

</section>

1010 * 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);
});