圆形视差背景定位

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;
}

小提琴