Large Hero Banner
The large header banner is a full screen hero banner that will dynamically calculate the height of the window and fill it with the chosen image. To use this banner type add /ssi/header-large-banner.html using the SSI include method right below the header of the desired page.
Note: To have the banner dissapear in a mobile viewport add the .primary class to the <body> element of the page otherwise the banner will remain in all screen sizes.
</header>
<!-- Include Page Template --> <!--#include virtual="/ssi/header-large-banner.html" -->
To change the background image edit the header-large-banner.html include file located in the ssi directory. The image is set by changing the background property in the style attribute for <div class="header-large-banner" style="background-image: url('/sample/images/background_2.jpg');">. The recommended dimensions of the banner images are 1500 by 500 pixels.
Demonstration
Toggle the buttons to add or remove the large hero banner.