Background Colors & Images

Background images

Background images can be added to sections. By default, the image will span the entire browser. You can choose to add content over the image or let the image stand alone.

Show/hide markup
<!-- example with no content -->
<section class="section bg-image no-content">
    <div class="bg-image-cover" style="background: url('image.png');"></div>
</section>

<!-- example with content -->
<section class="section bg-image">
    <div class="bg-image-cover" style="background: url('image.png');"></div>
    <div class="row">
        <div class="layout">
            <!-- Content goes here -->
        </div>
    </div>
</section>