圓形視差背景定位

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