Backgrounds

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

Background Image

Image Background

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

Parallax Backgrounds

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

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

HTML5 Video Background

Video Background

<section>
  <div class="bg-holder overlay" style="background-image:url(assets/img/headers/header-coming-soon.png);">
    <video class="bg-video" autoplay="autoplay" loop="loop" muted="muted">
      <source src="assets/video/shoes.mp4', type='video/mp4">
    </video>
  </div>
  <div class="text-center position-relative">
    <h4 class="text-white">Video Background</h4>
  </div>
</section>

Youtube video

For more Details see YTPlayer Documentation⟶

Youtube Video Background

<section class="position-relative py-8">
  <div class="bg-holder" style="background-image:url(assets/img/headers/header-event.jpg);">
    <div class="bg-youtube" data-property="{videoURL: &quot;https://www.youtube.com/watch?v=hLpy-DRuiz0&quot;, startAt: 10, stopAt: 584, mute: true, showYTLogo: false}"></div>
  </div>
  <div class="position-relative vh-50 d-flex align-items-center justify-content-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)
Image Background
(.overlay-0)
Image Background
(.overlay-1)
Youtube Background
(.overlay-2)
<section class="text-center py-7">
  <div class="bg-holder overlay overlay-2" style="background-image:url(assets/img/headers/header-event.jpg);">
    <div class="bg-youtube" data-property="{
          videoURL:'https://www.youtube.com/watch?v=hLpy-DRuiz0', 
          startAt: 10, 
          stopAt: 584, 
          mute: true, 
          showYTLogo: false
        }">
    </div>
  </div>
  <div class="text-center position-relative">
    <h5 class="text-white">Youtube Background</h5>
    <h6 class="text-white">(.overlay-2)</h6>
  </div>
</section>