视差背景位置不正确

时间:2014-03-26 09:38:03

标签: css parallax

我正在尝试修复我们的演示网站上的视差效果,但是对于我的生活,我无法正常工作。视差效果完美地工作,但是图像的定位在下面重复。当浏览器窗口不是全宽时,会出现此问题。

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

我不确定它的图像(虽然我们已经试过几次)或者代码不正确。这不是第一次使用视差的体验,它通常很简单所以我有点困惑

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

我不得不改变

 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;