Parrallax背景定位不正確

我試圖修復我們的演示網站上的視差效果，但是對於我的生活我無法正常工作。視差效果可以很好地發揮作用，但圖像的位置會在下面重複。瀏覽器窗口不是全寬時會發生此問題。Parrallax背景定位不正確

background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) 50% 0 fixed; 
background-size: cover;

jQuery的

jQuery(document).ready(function(){ 
     // cache the window object 
     $window = jQuery(window); 

     jQuery('section[data-type="background"]').each(function(){ 
     // declare the variable to affect the defined data-type 
     var $scroll = jQuery(this); 

      jQuery(window).scroll(function() { 
      // HTML5 proves useful for helping with creating JS functions! 
      // also, negative value because we're scrolling upwards        
      var yPos = -($window.scrollTop()/$scroll.data('speed')); 

      // background position 
      var coords = '50% '+ yPos + 'px'; 

      // move the background 
      $scroll.css({ backgroundPosition: coords });  
      }); // end window scroll 
     }); // end section function 
    }); // close out script 

    /* Create HTML5 element for IE */ 
    document.createElement("section");

enter image description here

我不知道，如果它的形象（儘管我們已經嘗試了數個）或代碼incorrect.This是不是第一次經歷視差，它一般很簡單，所以我有點困惑

感謝您的任何幫助

來源

2014-03-26 memyselfandmyiphone

我試着在Chrome，Firefox和IE10的鏈接，它看起來很好，我對他們三個都...？那裏沒有奇怪的定位。編輯：現在我看到了這個問題。只有當您的瀏覽器窗口不是100％最大化時纔會發生這種情況......您應該將其添加到說明中。 :) –

@ S.B。啊，你是對的。我會補充一點。 – memyselfandmyiphone

如果我將檢查器中的'background-position'值更改爲'50％0％'，則圖像無問題。你可以嘗試改變jQuery，所以coords都是百分比？ –

我不得不改變

background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) 50% 0 fixed;

到

background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) fixed; 
background-position: center top!important;

來源

2014-03-26 10:42:33 memyselfandmyiphone

Parrallax背景定位不正確

回答

相關問題