Need some CSS assistance

Vote count:

0

Hi I have been trying to find a fix for this for quite a while now with no luck. Basically the background parallax image is not and wont become centered no matter what I do, See Here! The size of the background image is 2000px by 1333px and looks like this. This is the way my HTML is set up:

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

The CSS stylesheet:

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

And Javascript:

$(function() {

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

// Parallax Backgrounds
// Tutorial: http://ift.tt/1dBAxEZ

$('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
});

});

I have the parallax scrolling working, but problem is that the background image is not centered on the y axis, making a big white gap in the background. If anyone knows why it isnt working then I would greatly appreciate it if you could help me out.

asked 54 secs ago

colin ball

1

Need some CSS assistance