Problems With Background Image Position On Stellar.js

I'm using stellar.js to add a parallax effect to a vertical scrolling website, but I'm having problems with the background positions. When I use the class 'data-stellar-background-

Solution 1:

I had the same issue.

In your jquery.stellar.js file change the stellar function so that horizontal scrolling is set to false (its set to true as default).

$.stellar({
horizontalScrolling:false// rest of function
});

Solution 2:

Try changing scrollProperty to transform, like:

scrollProperty:'transform'

That worked for me.

Solution 3:

I had the same problem and already had horizontalScrolling:false. Adding scrollProperty: 'transform' resolved the issue for me.

Solution 4:

Having the same issue I tried adding

scrollProperty and horizontalScrolling

Though this resulted in my background not being loaded.

Removing both properties and running Stellar like..

$.stellar({}) instead of $.stellar()

(like on the Stellar site)

Parallax is working like a charm.