Skip to main content

Backgrounds

Add background images or a skewed background in various colors.

Image background

Boost Conference

Rethink your business model

Use .bg-cover for a responsive background image. Add a nested div with .bg-overlay and .bg-{color} for a color overlay. Adjust 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

Use .bg-skew to add a skewed background to 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>