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 .bg-opacity-{10, 25, 50, 75}.

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