圓形視差背景定位

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

小提琴