圆形视差背景定位

Question

我正在使用脚本根据鼠标移动/手机移动将背景位置移动一定的像素距离。但是，我无法想出一种方法来始终使背景扩展包含div的整个宽度和高度。该脚本确实可以根据鼠标的移动来移动背景..但是它会过多地移动背景图像并导致空白。

看看小提琴，你会明白我的意思。

FIDDLE：http://jsfiddle.net/K9Ae7/2/

HTML：

<section id="court-fitness" data-parallaxify-background-range="30"></section>

CSS：

#court-fitness {
height: 500px;
width: 100%;
background:url('https://www.tourresource.com/Board/Themes/SMF_Grunge/images/bg.jpg');
background-repeat: no-repeat;
}

JS：

        $('#court-fitness').hover(function () {
        $(this).parallaxify({
            parallaxBackgrounds: true,
            useMouseMove: true,
            useGyroscope: true,
            inputPriority: 'mouse'

        });
    },

    function () {
        $(this).parallaxify('destroy');
    });

剧本的其余部分都在小提琴中。感谢。

Answer 1

检查出来：

#court-fitness {
    height: 500px;
    width: 110%;
    margin-left: -5%;
    margin-top: -5%;
    background:url('https://www.tourresource.com/Board/Themes/SMF_Grunge/images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    z-index: -1;
}

Fiddle