I would like to use the slider as a fixed background so that my below content scrolls over top of the slider as the user moves down. The first image works great, but all other images have a gray background and I can’t figure out why. It works good if I take off the “Fixed” setting, but this does not allow the effect I am going for. Any suggestions would be greatly welcomed!
Hi @nlrstudios Share your public link here so we can observe your problem better. Enable it from Site Settings.
Hi @nlrstudios! We’ve seen this issue with the slider a few times.
It is related to poor browser support for “background fixed” images.
We should create a tutorial for this effect, but the workaround basically goes like this:
- Remove the “fixed” setting from your background images.
- Style the slider Mask to “Position: Fixed”
- Any content below the slider would need to be “Position: Absolute” with a “Top” value set to the desired height of the slider.
- Lastly, you may need to set a higher z-index to your content above the slider.
Hopefully that makes sense!
Thanks @danro. That worked great!
Hi, I’m having the same issues, however, I also have a container with text and a button that I don’t want to fix with the slider image. Is there a way to have both fixed and scrolling elements?
Please can you look at the slider on my 'Tests" page and tell me if I can un-fix the header and button in the first slide…
This topic is now closed.
Mark- I will send you a message via PM with some tips for your layout, thanks!