Streaming live at 10am (PST)

[Resolved] Issues with Slider in fixed position

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!

www.nlrstudios.com/test

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:

  1. Remove the “fixed” setting from your background images.
  2. Style the slider Mask to “Position: Fixed”
  3. Any content below the slider would need to be “Position: Absolute” with a “Top” value set to the desired height of the slider.
  4. Lastly, you may need to set a higher z-index to your content above the slider.

Hopefully that makes sense!
-Dan

3 Likes

Thanks @danro. That worked great!

2 Likes

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…

Public link: https://webflow.com/design/riaz-london?preview=2bb6319db3afe792618c47599e5911d0

This topic is now closed.

Mark- I will send you a message via PM with some tips for your layout, thanks!