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.
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?