You can use background colors and images to draw attention to sections.
We design sites using two primary background colors—crimson and light gray—and one secondary background color. You can browse our color palette to find an appropriate secondary background color for your site.
We also apply background images to sections, where it's appropriate.
You can set a section's background color by using bg-crimson or bg-gray. You should always add an additional class of bg-dark when using a dark background color.
<section class="section bg-crimson bg-dark">
<div class="row">
<div class="layout">
<!-- Content goes here -->
</div>
</div>
</section>The most effective way to apply a secondary color to a site is to add a color class to the body tag and use bg-secondary on individual sections.
Don't forget to add the bg-dark class when necessary.
<body class="mahogany">
<!-- Additional markup -->
<section class="section bg-secondary dark">
<div class="row">
<div class="layout">
<!-- Content goes here -->
</div>
</div>
</section>
</body>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.
<!-- 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>