I am using Stellar.js v0.6.2 jQuery plugin to display 6 background images with parallax effect.

Everything works fine on first load of the page, but if I reload/refresh it, I see that the background-position settings are wrong and the parallax effects are ruined.

This is Stellar.js settings that I use:

scrollProperty: 'scroll',
positionProperty: 'position',
horizontalScrolling: false,
verticalScrolling: true,
horizontalOffset: 0,
verticalOffset: 0,
responsive: false,
parallaxBackgrounds: true,
parallaxElements: true,
hideDistantElements: true,

This is what I have in HTML source, as an example:

<section class="visible" id="contact" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="200"></section>

This is how correct background position looks when page is opened for a first time:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px 82.4701px;"></section>

This is how it looks when I refresh the page:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px -305.2px;"></section>

As you see, the negative value -305.2px is what ruins the page.

Any idea why this is happening and what can I do to prevent that?

THOUGHTS: Is it related to offsets? Can't find an answer, need a helping hand.

I am using Stellar.js v0.6.2 jQuery plugin to display 6 background images with parallax effect.

Everything works fine on first load of the page, but if I reload/refresh it, I see that the background-position settings are wrong and the parallax effects are ruined.

This is Stellar.js settings that I use:

scrollProperty: 'scroll',
positionProperty: 'position',
horizontalScrolling: false,
verticalScrolling: true,
horizontalOffset: 0,
verticalOffset: 0,
responsive: false,
parallaxBackgrounds: true,
parallaxElements: true,
hideDistantElements: true,

This is what I have in HTML source, as an example:

<section class="visible" id="contact" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="200"></section>

This is how correct background position looks when page is opened for a first time:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px 82.4701px;"></section>

This is how it looks when I refresh the page:

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px -305.2px;"></section>

As you see, the negative value -305.2px is what ruins the page.

Any idea why this is happening and what can I do to prevent that?

THOUGHTS: Is it related to offsets? Can't find an answer, need a helping hand.

• javascript
• jquery
• scroll
• parallax
• background-position

• Looks like this is logged and not handled. Issue #60 github./markdalgleish/stellar.js/issues/60 – ProVega Commented Feb 15, 2014 at 0:53

4 Answers 4

Run into the same problem. To solve this add background-attachment: fixed; to the css of the element.

Source: http://markdalgleish./projects/stellar.js/docs/

I was suffering a similar issue but with positioned image elements rather than background images.

My initial solution was to move my stellar specific code from the $(document).ready() event to $(window).load(). This led me to the realisation that the image dimensions weren't available to stellar when the DOM was ready.

After adding CSS height and width attributes for the out of place elements the issue disappeared.

Try the following:

responsive: true,

I had the same problem. My mistake was, that i had put my javascript which calls my stellar.js function into the head of the document; instead of putting it into the body!

I was unaware of the fact that apperently the browser loads the head only the first time when the site is entered. therefore if you refresh the page, it will not reload your stellar.js function you put in the head, thus it will not correctly refresh the background-position values.

By puttting you javascript into the body you can make sure that the script is reloaded every time you refresh the page.