Not changing with scrolling when using bootstrap

[runarorested]

Greetings

I'm using bootstrap to make a web based on slides, each with a background and a foreground layer, both using the whole screen. The background layer sits behind and does contain a background image or video. The foreground contains text. Here is a cut down example:

https://codepen.io/Ruben-Martinez-Cabello/pen/LYoEMox

I wan't to add a certain movement in the background layer, but I've tried several other parallax effects, and they do not work, unless the divs with the background are directly under the body (I think because they use window.pageYOffset instead of document.documentElement.scrollTop).

Your library seems to allow to do so because you can suposedly define a customContainer (a parent for all the parallaxed elements?) to use as a base, but you don't document how to go from there. The image or video should hang from the customContainer? in the samples, the images seems to be put however you please. Should I use a wrapper or not?

As far as I know it must not be too bad since the JS installs itself and runs, which can be seen since it does make the images/videos bigger, but when I scroll, the backgrounds are fixed.

I've seen other issues about resizing badly with bootstrap due to horizontal overflow or sizing, but I don't know if this is the same bug or a new one.