Background

Image Background

<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg1.webp"></section>
  
<section class="wrapper image-wrapper bg-image bg-full bg-overlay text-white" data-image-src="./assets/img/photos/bg1.webp"></section>

Dark Background

<section class="wrapper bg-dark text-white"></section>

Gradient Background

Available options:

.gradient-1, .gradient-2, .gradient-3, .gradient-4, .gradient-5, .gradient-6, .gradient-7, .gradient-8,

bg-gradient-primary, bg-gradient-aqua, bg-gradient-green, bg-gradient-leaf, bg-gradient-navy, bg-gradient-orange, bg-gradient-pink, bg-gradient-purple, bg-gradient-red, bg-gradient-violet, bg-gradient-yellow, bg-gradient-fuchsia, bg-gradient-sky, bg-gradient-grape, bg-gradient-reverse-primary, bg-gradient-reverse-aqua, bg-gradient-reverse-green, bg-gradient-reverse-leaf, bg-gradient-reverse-navy, bg-gradient-reverse-orange, bg-gradient-reverse-pink, bg-gradient-reverse-purple, bg-gradient-reverse-red, bg-gradient-reverse-violet, bg-gradient-reverse-yellow, bg-gradient-reverse-fuchsia, bg-gradient-reverse-sky, bg-gradient-reverse-grape, bg-gradient-blend.

<section class="wrapper gradient-3 text-white"></section>
  
<section class="wrapper bg-gradient-primary text-white"></section>
  
<section class="wrapper bg-gradient-reverse-primary text-white"></section>

Color Background

Available options:

bg-white, bg-primary, bg-aqua, bg-green, bg-leaf, bg-navy, bg-orange, bg-pink, bg-purple, bg-red, bg-violet, bg-yellow, bg-fuchsia, bg-sky, bg-grape.

<section class="wrapper bg-primary text-white"></section>

Soft Background

Available options:

bg-soft-primary, bg-soft-aqua, bg-soft-green, bg-soft-leaf, bg-soft-navy, bg-soft-orange, bg-soft-pink, bg-soft-purple, bg-soft-red, bg-soft-violet, bg-soft-yellow, bg-soft-fuchsia, bg-soft-sky, bg-soft-grape.

<section class="wrapper bg-soft-primary"></section>

Pale Background

Available options:

bg-pale-primary, bg-pale-aqua, bg-pale-green, bg-pale-leaf, bg-pale-navy, bg-pale-orange, bg-pale-pink, bg-pale-purple, bg-pale-red, bg-pale-violet, bg-pale-yellow, bg-pale-fuchsia, bg-pale-sky, bg-pale-grape.

<section class="wrapper bg-pale-primary"></section>

Pattern Background

<section class="wrapper pattern-wrapper bg-image text-white" data-image-src="./assets/img/pattern.webp"></section>

Video Background

<section class="video-wrapper bg-overlay ratio ratio-16x9">
  <video poster="./assets/img/photos/movie2.webp" src="./assets/media/movie2.mp4" autoplay loop playsinline muted></video>
  <div class="video-content">
    <div class="container text-center">
      <h2 class="display-5 mb-0 text-white text-center">Content goes here</h2>
    </div>
    <!-- /.container -->
  </div>
  <!-- /.video-content -->
</section>