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 :smile:

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