StellarJs parallax background image not working

Question

I know there are other similar questions on this, believe me, I have been at this for almost two days now.

I am trying to use StellarJs to create a parallax background image in the header of my website. Unfortunately, it is having no effect whatsoever on the element with the specified data-stellar-background-ratio.

Here is a demo (with a different bg image than on my local machine).

I even made a version exactly like the example on the website and it still would not work. I looked into solutions on 4 other similar questions, none of which helped me. I’m at a loss here.

score 0 · Answer 1 · edited Feb 22 '20 at 12:44

0

Okay, so I can't speak to your local copy but I know that at least this one I fixed by moving the Stellar source code to an external resource and then adding a missing ); at the end of the $(document).ready() function and fixing that syntax error. You may want to check your local version to see if you have something similar, and check your dev tools' console to see if there are any syntax issues you're missing.

edited Feb 22 '20 at 12:44

Cœur

37,241
25
195
267

answered Apr 24 '15 at 01:26

moberemk

1,597
1
18
39

The missing `);` was an accident when I copy pasted into JSFiddle. I tried using stellar as an external resource instead of directly from my file system and still no luck. I can't understand why, I have the exact thing that works on jsfiddle – samrap Apr 24 '15 at 01:36
Without seeing any more of the code then there's not much help to be given here; is there more you can show? – moberemk Apr 24 '15 at 03:22

score 0 · Accepted Answer · edited May 23 '17 at 10:26

After punching a few holes in the drywall I realized that the problem had nothing to do with the element in question or the way I was calling the stellar function. It had to do with this little piece of CSS right here:

html, body {
    overflow-x: hidden;
    height: 100%;
}

It seems you cannot apply a height of 100% to the html and body tags, because after removing that height declaration, it works like a charm! I'm so confused as to why, and I will be contacting the creator of StellarJs to see if it is a bug or if it is intentional/expected behavior for some reason that I am overlooking.

The work-around for the height 100% issue can be found here: height: 100% or min-height: 100% for html and body elements?

StellarJs parallax background image not working

2 Answers2