Default 25px on background position's y axis

Hi Mark,

First I really love this plugin. And it’s the first time I use it for my project. But I got an issue with the plugin. Here’s a short story what I did with your plugin.

I create a section at the very top. This section will have parallax background via data-stellar-background-ratio=“0.5”. I set the section’s style to set

background-size: cover;
background-position: center center;
background-attachment: fixed
/* this will create the background image size follow the viewport's size, and it's needed. */

and I set the stellar options like this:

$.stellar({
    horizontalScrolling: false,
    responsive: true,
});

And I fire the script on document.ready. I noticed that when stellar is initiated, it set the background-position to 50% 25px. I don’ understand why it gives default 25px on the background-position’s y axis.

And then after the window is loaded, as I set the responsive to true, the plugin will calculate the background position. It sets to 50% 50%. But when I scrolled down the page and scrolled back to the very top. It sets to 50% 25px again.

It turns out that I set the ratio to 0.5 it will give you 25px and if I set the ratio to 0.25 I will have 12.5px.

My questions:

• Why the plugin give non-zero initial y axis? I think it should be 0px on y axis position.
• Why your responsive mode reset it to 50% 50%. I believe it should be 50% 0px. This will create a flash which is not good on the eye. Because on ready state you set it to 50% 25px and then on window loaded you set it back to 50% 50%.

Thanks

[bitkidd]

This worked for me.

background-size: cover;
background-position: 0 0;
background-attachment: fixed;
background-repeat: no-repeat;

[ctrl-d]

i simply added verticalOffset: 50, and it works just fine