html - 视差背景图像未居中

Question

您好，很长一段时间以来，我一直在努力寻找解决方案，但一直没有成功。基本上，无论我做什么，背景视差图像都不会也不会居中，See Here!背景图像的大小为 2000 像素 x 1333 像素，看起来 like this.这是我的 HTML 设置方式:

<section id="featurette" data-type="background" data-speed="5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <h2>Watch the Course Introduction</h2>
                    </div>
                </div>
            </div>
</section>

CSS 样式表:

#featurette {
    background: url('../img/stuff-bg.jpg') center center repeat fixed;
    background-size: cover;
    color: white;
}

和 Java 脚本:

$(function() {

    // Cache the Window object
    var $window = $(window);

    // Parallax Backgrounds
    // Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641



$('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });

        }); // end window scroll
    });

});

如果有人知道为什么它不起作用，那么如果你能帮助我，我将不胜感激。

Answer 1

试试这个，如果有任何问题请告诉我。

#featurette {
    background: url('../img/stuff-bg.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: white;
}