CSS background image centered with Stellar JS

Question

I'm setting a background image to an element with Stellar JS and trying to achieve a centered image that moves in parallax. However when I try to use the standard approach I realize that the background-position is updated by stellar which then overrides the centering (I'm assuming that's what's overriding it). I've created a fiddle to explain the situation.

http://jsfiddle.net/captDaylight/wvuQm/1/

Is there any way to have the image remain centered on scroll?

(stack is making me to accompany this post with code, although it's insignificant in this case, the example on the fiddle is pretty straightforward, so I'm posting something to bypass)

background: url(http://upload.wikimedia.org/wikipedia/commons/e/e5/Seine_wide.jpg) no-repeat center center; 
background-size: auto 100%;

<> I was reading this other stack post about background-position, but when I tried to do the update it suggested it seems to have broken the parallax.

http://jsfiddle.net/captDaylight/wvuQm/3/

Answer 1

You need to disable horizontal parallax. This will cause Stellar.js to leave your horizontal background positioning untouched.

In your example, the updated call to Stellar

$(window).stellar({ horizontalScrolling: false });

I've updated your JSFiddle example with this change: http://jsfiddle.net/wvuQm/5/