Parallax background image Not Centered

Question

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 Java script:

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

});

If anyone knows why it isnt working then I would greatly appreciate it if you could help me out.

Yes, If it helps this is the Java code (just updated the question). — colin ball
– colin ball, Commented Apr 11, 2015 at 19:00

Athax · Accepted Answer · 2015-04-11 18:04:48Z

2

Try this, let me know if there's till any problem.

#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;
}

answered Apr 11, 2015 at 18:04

Athax

1822 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

colin ball Over a year ago

Unfortunately not this is the result. gyazo.com/3f98c4d55debc155afbf6b2526623233

Athax Over a year ago

@colinball try to define a height.

colin ball Over a year ago

I can add a defined height but since its not being centered in the middle I have to make it super large (which then makes it pixelated) to compensate for the space its not covering.

Athax Over a year ago

@colinball So what you want is that the picture expands in every direction untill it fills out the remaining space?

colin ball Over a year ago

What I'm wanting is for the background to move just on the y axis in the opposite direction of the scroll at the speed of 5 (if that makes sense). 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.

|

Collectives™ on Stack Overflow

Parallax background image Not Centered

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related