Streaming live at 10am (PST)

[Resolved] Issues with Slider in fixed position


#1

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


Fixing images & scrolling elements within a slider
Fixed slider but NOT working properly in Chrome and iPad
#2

Hi @nlrstudios Share your public link here so we can observe your problem better. Enable it from Site Settings.


#3

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


Fixed images in slider
I need help with Slider Widget
Trouble adding fixed background images to slides
#4

Thanks @danro. That worked great!


#5

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?


#6

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


#7

This topic is now closed.

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


unlisted #8