圆形视差背景定位

Question

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

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

小提琴：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