CSS Image with Stellar JS Center

Question

I set the background image of an element with Stellar JS and try to create a centered image that moves in parallax. However, when I try to use the standard approach, I understand that the background position is updated stellar, which then overrides the centering (I assume this is an override). I created a violin to explain the situation.

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

Is there a way to keep the image centered on the scroll?

(the stack makes me accompany this post with code, although in this case it is insignificant, the example on the violin is quite simple, so I am sending something around)

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

<> I read this other column about the starting position, but when I tried to update, he suggested that he broke 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 phoning unchanged.

In your example, an updated call to Stellar

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

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

Answer 2

Delete the following css

edge bottom: 50px;

add the following script and try

 $(window).stellar({ scrollProperty: 'transform' });