Streaming live at 10am (PST)

Adding text over full width background video


#1

Hi there,

I am trying to achieve a look like this: http://chattanoogarenaissancefund.com/. I would like a hero section with a fullwidth video as a background and I'd like to add text over the top of it.

Here is a link to my site: https://webflow.com/design/atdemo-1

My sample video is hosted in dropbox. I looked through your forums and added the following code to add into the HTML embed element:

I have successfully added the video on to my page, and I want to add text over the top of the video (as well as a fixed nav bar). Every time I add a container and text to my Hero section, it sits above the video (instead of over it) I've tried adjusting the padding on the container to push it down over the video, but instead it just pushes the video down.

I have watched the tutorial videos and searched the forums for an answer however haven't found one that shows, step by step, how to add a video background and add text and a nav bar over it.


#2

Hi @hollis, Can you please update your post with some more information so we can help you faster? Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

In the meantime, this article may be helpful too: http://help.webflow.com/faq/how-to-make-a-fullscreen-background-video-in-webflow

From there, you would need to use absolute positioning to either place text or a div block that houses text over the background video.

Hope this helps! smile


#3

Hi @thewonglv ,

Here is the link to my site:
https://preview.webflow.com/preview/atdemo-1?preview=6dfd41958f4911f1da8fe188d116547c

I am using Chrome 44

I have a container, div block and text inside which is sitting on top of my video (see screenshot). When I change the positioning of the div block to absolute, the whole thing disappears completely. It doesn't reorder anything in the navigator, it just goes away! What am I doing wrong?

Thanks for your help smile
Hollis


#4

Set the Z index number to a high number ( I just put 4000 here for an example. ) that will get you moving in the right direction.


#5

Thank you @David_Moore, that helped.


#6

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