Hi, I’m trying to create a website where I have a video as the background. However, as the content scroll up, I would like it to go underneath the fixed header and a frame at the bottom which keep displaying the background video. I have made a graphic representation to better explain it, the video being shown as the red area: http:
Thanks a lot 
Ah if only more users were drawing such good mockups for their requests 
There is an immediate solution that comes to mind, but it has downsides.
Consider this mockup:
http://vincent.polenordstudio.fr/snap/j3vf0.jpg
The green block is a section, 100VH height 100% width, with your bg video and your fixed menubar inside.
The blue block is a DIV inside the green block, transparent, positionned in the middle, scrollable, overflow hidden.
So you see where I’m going… the scroll of your site happens in the blue block. It means to trigger the scroll the mouse cursor must be on top of the blue block. The vertical sliders ar on the blue block (can be hidden with code) and not on the full body.
Thanks a lot for the cool words Vincent! I tried my best
The visual effect created by your method is exactly the one I’m trying to create. But do you think there could be another way to accomplish it that does not involve having the scroll bar inside the div? I’ve seen some website do it but I can’t seem to think of a way to replicate it on Webflow!
There must be, but I haven’t slept last night and my brain is really really slow.
I’m going to try it right now, just making the blue div 100% too, with margins, will see how the booundaries react.
Be back in a few.
So that’s what I have been describing before:
http://vincents-radical-cards.webflow.io/vdobgtest
So far I don’t have better. It’s easy to mask the slider with code.
pub link : https://preview.webflow.com/preview/vincents-radical-cards?preview=62be1e41c57b0216268d5870fdc23b29
Thanks Vincent. Only problem is that that solution doesn’t play very well on mobile screens either 
There must be a way to do it on Webflow, I just can’t figure it out right now.
Nothing in this design is for mobile. On mobile there is no bg video and you don’t narrow the viewport.
At this point I think I would be happy to just have an image as a background (or set an image for mobile screens) and make the desired effect work only for the header menu, without the narrowed viewport.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
