Backgrounds

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

Background Image

Image Background

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

Parallax Backgrounds

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

JavaScript
<script src="vendors/rellax/rellax.min.js"></script>
Image Background Parallax
<div class="position-relative py-6 py-lg-8 overflow-hidden">
  <div class="bg-holder overlay overlay-2 vh-50" style="background-image:url(../../assets/img/gallery/03-f.jpg);" data-parallax="" data-rellax-percentage="0.5" data-rellax-speed="-3"></div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h5 class="text-white">Image Background Parallax</h5>
  </div>
</div>
Video Background Parallax
<div class="position-relative py-6 py-lg-8 overflow-hidden">
  <div class="bg-holder overlay overlay-2 " style="background-image:url(../../assets/img/headers/header-coming-soon.png);" data-parallax="" data-rellax-percentage="0.5" data-rellax-speed="-3"><video class="bg-video" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline">
      <source src="../../assets/video/shoes.mp4" type="video/mp4" />
      <source src="../../assets/video/shoes.webm" type="video/webm" />
    </video></div> <!--/.bg-holder-->
  <div class="position-relative text-center">
    <h5 class="text-white">Video Background Parallax</h5>
  </div>
</div>

Html5 Video Background

Video Background

<div class="position-relative">
  <div class="bg-holder" style="background-image:url(../../assets/img/headers/header-coming-soon.png);"><video class="bg-video" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline">
      <source src="../../assets/video/shoes.mp4" type="video/mp4" />
      <source src="../../assets/video/shoes.webm" type="video/webm" />
    </video></div> <!--/.bg-holder-->
  <div class="position-relative vh-50 d-flex flex-center">
    <h4 class="text-white">Video Background</h4>
  </div>
</div>

Youtube Video

Youtube Video Background

<div class="position-relative h-100 w-100">
  <div class="bg-holder background-video" style="background-image:url(../../assets/img/headers/header-event.jpg);">
    <div class="yt-video" data-youtube-embed='{"videoId":"hLpy-DRuiz0","startSeconds":10,"endSeconds":584}'></div>
  </div> <!--/.bg-holder-->
  <div class="position-relative vh-50 d-flex flex-center">
    <h4 class="text-white">Youtube Video Background</h4>
  </div>
</div>

Shades of overlay

Use following classes with .overlay class for different shades.

Image Background
(.overlay)
Image Background
(.overlay-0)
Image Background
(.overlay-1)
Youtube Background
(.overlay-2)
<div class="row g-4">
  <div class="col-sm-6">
    <div class="position-relative py-7">
      <div class="bg-holder overlay" style="background-image:url(../../assets/img/headers/header-41.jpg);"></div> <!--/.bg-holder-->
      <div class="position-relative text-center">
        <h5 class="text-white">Image Background </h5>
        <h6 class="text-white">(.overlay)</h6>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="position-relative py-7">
      <div class="bg-holder overlay overlay-0" style="background-image:url(../../assets/img/headers/header-41.jpg);"></div> <!--/.bg-holder-->
      <div class="position-relative text-center">
        <h5 class="text-white">Image Background </h5>
        <h6 class="text-white">(.overlay-0)</h6>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="position-relative py-7">
      <div class="bg-holder overlay overlay-1" style="background-image:url(../../assets/img/headers/header-41.jpg);"></div> <!--/.bg-holder-->
      <div class="position-relative text-center">
        <h5 class="text-white">Image Background </h5>
        <h6 class="text-white">(.overlay-1)</h6>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="position-relative py-7">
      <div class="bg-holder overlay overlay-2" style="background-image:url(../../assets/img/headers/header-event.jpg);">
        <div class="yt-video" data-youtube-embed='{"videoId":"hLpy-DRuiz0","startSeconds":10,"endSeconds":584}'></div>
      </div> <!--/.bg-holder-->
      <div class="position-relative text-center">
        <h5 class="text-white">Youtube Background</h5>
        <h6 class="text-white">(.overlay-2)</h6>
      </div>
    </div>
  </div>
</div>