Streaming live at 10am (PST)

Video section overlay not covering whole video

Hi I am new to webflow and trying to see if it will suit my needs. I am playing with it to test all its features and have come to a point where I don’t know if I’m doing something wrong or if I just don’t know how to fix the issue.

This is a link to a test page.

On this page you can see I have a video section at the top with the nav and some other content in there. The section right below that is “latest work” and for some reason it is eating into the video section. On top of that when I add a gradient overlay to the video section it only covers about 90 percent of the video and then drops off. How do I resolve these two issues?

Thank you!

Chris Burke

Hi @chris.btbi,

You’ll need to follow this to add you read-only link to your post. And then others in the community can take look for ya.

Great! Thank you Gary Michael!

Your “Background Video 2” div needs to be the height of the screen to fill the page. Set it to 100vh for this.

@chris.btbi, yep looking at it now…

Yep your Background video needs 100vh but that doesn’t fix your overlapping issue from below.

  1. Take the nav bar out of the bg video section, put it above. There’s no need for it to be inside, unless you want it there.
  2. I would delete the background video layer, but keep all the other layers, and add the video again with these settings.

I did this for you in a video screencast. I couldn’t upload a video into the layer because it’s read-only:

When you add the overly use the background color instead and reduce the opacity. That should fill the entire div.

A short answer to your question though is: there are two things that make your overlay not cover the whole video - overflow:visible and position:auto. Set those to default (hidden and relative correspondingly) and its done

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.