正在裁剪全屏背景图像

Question

我有以下JavaScript与基本CSS一起创建视差背景图像，现场预览我在演示中已有的内容：http://loai.directory

这是Javascript：

//Parallax background image
var velocity = 0.5;

function update() {
    if ($(window).width() <= 1024) {
        return;
    }
    var pos = $(window).scrollTop();
    $('.parallax').each(function () {
        var $element = $(this);
        var height = $element.height();
        $(this).css('background-position', '50%' + Math.round((height - pos) * velocity) + 'px');
    });
};
$(window).on('scroll', update);
update();

CSS：

/*Backgruond Parallax*/
 .parallax {
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

     #gallery .parallax {
        background-image: url('../images/image.jpg');
        padding: 100px 0;
    }

    #gallery .parallax.A {
        background-image: url('../images/backgruond.jpg');
        padding: 100px 0;
    }

最后是HTML：

<div class="topSection parallax">
    <div class="content"></div>
</div>

---

我遇到的问题是背景图像从底部被裁剪，而你向下滚动的距离越远，它们就越糟糕！我相信这是因为当您滚动时，视差功能将背景图像位置移动到顶部...但我该如何解决这个问题呢？请帮忙。

蓝色部分假设用背景图像填充。