Problems locating the background image on Stellar.js

Question

I use stellar.js to add a parallax effect to a vertical scroll website, but I have problems with the background position. When I use the "data-stellar-background-ratio" class to add a parallax effect to a div, I cannot set position the background to the right using CSS. All background images just go left, no matter what. I tried using the position property plugin syntax available on the website, but it seems to somehow violate the parallax effect. Can anybody help me? Thanks!

Answer 1

I had the same problem.

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

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

Answer 2

Try changing scrollProperty to transform , for example:

 scrollProperty: 'transform' 

It worked for me.

Answer 3

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

Answer 4

Having the same problem, I tried adding

 scrollProperty and horizontalScrolling 

Although this led to my background not loading.

Removing both properties and starting Stellar as ..

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

(e.g. on Stellar website)

Parallax works like a charm.