Skip to main content

Backgrounds

Add background images or a skewed background in different colors.

Image background

Boost Conference

Rethink your business model

Add .bg-cover to include a responsive background image. Add a div inside with .bg-overlay and .bg-{color} to get a color overlay. Then you can change the opacity with .opacity-{0, 25, 50, 75, 100} and layer the content properly using z-{0, 10, 20, 30, auto}.

<div class="bg-cover py-6" style="background-image: url(assets/img/conference.jpg);">
<div class="bg-overlay bg-black opacity-25"></div>
<div class="container">
<div class="row">
<div class="col-md-6 z-10">
<h1 class="display-4 text-white">Boost Conference<h1>
<p class="lead text-white">Rethink your business model</p>
</div>
</div>
</div>
</div>

Skew background

Add a div with the .bg-skew class to include a skew background on a page.

<div class="bg-skew bg-skew-light">
...
</div>

And set the background color using the color utilities.

<div class="bg-skew bg-skew-primary text-white">
...
</div>