dc_dweller Posted March 27, 2018 Share Posted March 27, 2018 Hi all, I want my web site to look like this NYC Auto Show site: https://www.autoshowny.com/ Notice that the header and the full-screen video below it occupy 100% of the screen height, and there are sections below that as well. What HTML5/CSS3 code should I use to achieve that effect? I tried header {height: 10%} .videosection {height: 90%} while setting the video width and height to 100%, but that did not work. Thanks in advance! Link to comment Share on other sites More sharing options...
Ingolme Posted March 27, 2018 Share Posted March 27, 2018 The section would be 100% height, with a header in it. The <video> element would be in the background using position: absolute and a negative z-index. A percentage height won't be recognized unless the document root also has a specified height, so the html and body elements need to be set to 100% as well. The following code is just the beginning, it's probably going to need tweaking so don't just copy it, learn from it. <section class="main"> <video></video> <header> [Logo] [Menu] </header> [More content] </section> html,body { height: 100%; /* Necessary to recognize 100% as 100% of the window */ } .main { height: 100%; position: relative; overflow: hidden; } .main video { position: absolute; z-index: -1; min-width: 100%; min-height: 100%; width: auto; height: auto; top: 0; left: 0; } .main header { color: #FFF; background: #000; } Link to comment Share on other sites More sharing options...
dc_dweller Posted March 27, 2018 Author Share Posted March 27, 2018 Thanks a lot, this is very helpful! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now