Hero images are large static images that span the full viewport and are designed to be placed directly underneath the menu.
There are four different sizes available to you: bg-img-xs, bg-img-sm, bg-img-md, and bg-img-lg.
<header>
...
</header>
<section>
<div class="bg-img bg-img-xs" style="background-image: url('../img/presidentsmansion01_1920.jpg');">
</div> <!-- .bg-img -->
</section>
<header>
...
</header>
<section>
<div class="bg-img bg-img-sm" style="background-image: url('../img/presidentsmansion01_1920.jpg');">
</div> <!-- .bg-img -->
</section>
<header>
...
</header>
<section>
<div class="bg-img bg-img-md" style="background-image: url('../img/presidentsmansion01_1920.jpg');">
</div> <!-- .bg-img -->
</section>
<header>
...
</header>
<section>
<div class="bg-img bg-img-lg" style="background-image: url('../img/presidentsmansion01_1920.jpg');">
</div> <!-- .bg-img -->
</section>