Creating a fullscreen hero DIV for your site header

You may have seen some awesome websites or themes that comes with a full-screen hero section. When you scroll down you would see the rest of the content below it. Even if you resize the window or check the site on a mobile device, this hero section will often remain as a full-screen element. This is a cool layout component and here we will see how to get this done.

Here we will see 2 different ways to get this output. 

  1.  jQuery based
  2. CSS only based

jQuery based

With jQuery we can assign a dynamic height and width to a target element.  We will create a javascript function that gets the height and width value of the window and assign that values to the hero element. That will make the hero section fullscreen. We will also set this function to run every time the window is resized, so that the hero section is consistent with the window size. Please check the codepen below to see the code.

See the Pen gbjNgw by Jinson Abraham (@web2feel) on CodePen.

CSS based

With this method we are avoiding the javascript dependency. We will make use of the Viewport units. What are viewport units? It is the unit size representing 1% of the viewport size. Different type of viewport units. 

  • vh = 1% of viewport height.
  • vw = 1% of viewport width
  • vmin = Smaller value among the both
  • vmax = Larger value among the both.

This is widely supported on all modern browsers and partially supported on IE 9 and above.  In this method we can simply assign the height value for our hero section as 100vh. That will be 100% of the viewport height. The width can be set as 100%. This will make the hero section full-screen. It will also be consistent even when you re-size the window. Please check the codepen below to see the code. 

 

See the Pen WbgbMm by Jinson Abraham (@web2feel) on CodePen.

  • Thanks for this useful tutorial.

  • Hecate Doe

    I love this; thanx for sharing! BUT it doesn’t work in the default Android browsers on Android tablets. The intro section with the image just doesn’t show; the site begins with the first page below that, but with the other elements (SOME text, etc.) still showing. It actually doesn’t look awful that way, just a bit boring :), but I’d love to know how to get this to degrade more gracefully for Android, since the whole point of my redoing the site was to get it to be responsive for mobile users.
    NOTE: using the javascript piece, your demo works on the Android, but not the pure css, which is what I’m trying to get by with since many block js. Thanks!

  • Great examples. The CSS only version can also be accomplished by using simply height: 100% as long as the parent (i.e. body element) is also set to height 100%.

  • superzamp

    Was not aware of the vh unit, thanks for sharing!

  • Tyler Jackson

    Hey thanks so much, the CSS only version is working brilliantly on desktop but it works only 50% of the time on apple mobile devices. Half the time the div expands to the whole page not just the viewport. It’s very strange and i cant figure out the bug, any ideas? Thanks again.

    • Tyler Jackson

      Update: CSS version causes issues on mobile devices BUT the jQuery method seems to work just fine. 🙂

  • Charlie White

    Hey this works really great! But have a question. I want to set the hero image to be 50vh and it works great – except for me footer which is no longer sticky to the bottom of the page and has white space beneath it. Anyway to fix this?

  • I really appreciate this, super helpful to have two clean, simple ways to get it done. Thanks!

  • Mark Lee

    Trying for two days to get the css version to work with the default Android browser on a Nexus and Galaxy Tab. Seems impossible. Thanks for a nice simple solution for most other browsers. Works very well with the W3.CSS class for a pure CSS slider for those who love busyness on a page.

  • Yes, this is really very cool layout component, thanks for sharing the simple Technic.