Fixed Header Displaying Background

[Gallardooo (Gallardo)]

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

[vincent (Webflow Expert)]

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:

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.

[Gallardooo (Gallardo)]

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!

[vincent (Webflow Expert)]

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.

[vincent (Webflow Expert)]

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

[Gallardooo (Gallardo)]

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.

[vincent (Webflow Expert)]

Nothing in this design is for mobile. On mobile there is no bg video and you don’t narrow the viewport.

[Gallardooo (Gallardo)]

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.