Backgrounds

These modular elements can be readily used and customized in every layout across pages.

Background Image

<div class="position-relative py-6 py-lg-8">
  <div class="bg-holder" style="background-image:url(../assets/img/69.jpg);"></div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h4 class="text-white">Background Image</h4>
  </div>
</div>

Parallax Backgrounds

Use .parallax class with .bg-holder class and .has-parallax to it's parent for effect.

<script src="../vendors/rellax/rellax.min.js"></script>

Image Background Parallax

<section class="overflow-hidden rounded has-parallax">
  <div class="bg-holder overlay overlay-2 parallax min-vh-100" style="background-image:url(../assets/img/25.jpg);" data-parallax="data-parallax" data-rellax-speed="1"> </div>
  <div class="text-center position-relative">
    <h5 class="text-white">Image Background Parallax</h5>
  </div>
</section>

Video Background

<section class="py-0">
  <div class="bg-holder overlay rounded" style="background-image:url(../assets/videos/giant-wheel/giant-wheel.jpg);"><video class="bg-video" autoplay="autoplay" loop="loop" muted="muted">
      <source src="../assets/videos/giant-wheel/giant-wheel.mp4" type="video/mp4" />
    </video></div>
  <div class="position-relative vh-50 d-flex flex-center">
    <h4 class="text-white">Video Background</h4>
  </div>
</section>

Youtube video

Youtube Video Background

<section class="py-0">
  <div class="bg-holder" style="background-image:url(http://img.youtube.com/vi/teLhLLlhfzc/maxresdefault.jpg);">
    <div class="yt-video" data-youtube-embed='{"videoId":"teLhLLlhfzc","startSeconds":7,"endSeconds":58}'></div>
  </div> <!--/.bg-holder-->
  <div class="position-relative vh-25 d-flex flex-center">
    <h4 class="text-white">Youtube Video Background</h4>
  </div>
</section>

Shades of overlay

Use following classess with .overlay class for different shades.

Image Background

(.overlay)

<section class="text-center py-7">
  <div class="bg-holder overlay" style="background-image:url(../assets/img/41.jpg);"></div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h5 class="text-white">Image Background</h5>
    <p class="text-white fs-1">(.overlay)</p>
  </div>
</section>

Image Background

(.overlay-0)

<section class="text-center py-7">
  <div class="bg-holder overlay overlay-0 rounded" style="background-image:url(../assets/img/41.jpg);"></div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h5 class="text-white">Image Background</h5>
    <p class="text-white fs-1">(.overlay-0)</p>
  </div>
</section>

Image Background

(.overlay-1)

<section class="text-center py-7">
  <div class="bg-holder overlay overlay-1 rounded" style="background-image:url(../assets/img/41.jpg);"></div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h5 class="text-white">Image Background</h5>
    <p class="text-white fs-1">(.overlay-1)</p>
  </div>
</section>

Youtube Background

(.overlay-2)

<section class="py-3">
  <div class="bg-holder" style="background-image:url(http://img.youtube.com/vi/teLhLLlhfzc/maxresdefault.jpg);">
    <div class="yt-video" data-youtube-embed='{"videoId":"teLhLLlhfzc","startSeconds":7,"endSeconds":58}'></div>
  </div> <!--/.bg-holder-->
  <div class="position-relative py-6 d-flex flex-center flex-column">
    <h5 class="text-white">Youtube Background</h5>
    <p class="text-white fs-1">(.overlay-2)</p>
  </div>
</section>