Streaming live at 10am (PST)

Full Page Background Video Design

Hey, stumbled upon this website and was wondering how something like this could be pulled off in webflow? Full page video/gif as background with a logo centered in the middle. Cheers

1 Like

Great question @miikede :grinning_face_with_smiling_eyes:

I would recommend using the Background video element as a section and giving it a width of 100% and a height of 100vh (100% of the viewport-height).

Then adding a Flexbox style to the Background video element with a align-center and justify center as shown in this screenshot:

Then uploading a logo image which you’ll drop inside of the background video element.

Here’s a preview of the demo site pictured above along with the Read-Only link to the project:

Demo Link ➞

Read-Only link preview in the Designer ➞

Please note: You may want to consider keeping the motion to a minimum with background videos as they can cause negative side effects for anyone sensitive to motion.

You da man Waldo! Thanks

1 Like