Backgrounds
These modular elements can be readily used and customized in every layout across pages.
Image Background
Image Background
<div class="position-relative py-6 py-lg-8">
<div class="bg-holder rounded overlay overlay-0" style="background-image:url(../assets/img/gallery/g2.jpg);">
</div> <!--/.bg-holder-->
<div class="position-relative text-center">
<h4 class="text-white">Image Background</h4>
</div>
</div>Parallax Backgrounds
Use .parallax class with .bg-holder class and .has-parallax to it's parent for effect.
Image Background Parallax
<section class="overflow-hidden rounded has-parallax">
<div class="bg-holder overlay overlay-2 parallax rounded" style="background-image:url(../assets/img/gallery/g3.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
Video Background Parallax
<section class="text-center py-8 overflow-hidden rounded" id="header-video">
<div class="bg-holder overlay overlay-2 parallax h-50vh rounded" 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="container">
<h5 class="text-white">Video Background Parallax</h5>
</div>
</section>Javascript
<script src="assets/js/rellax.min.min.js"></script>HTML5 Video Background
Video Background
<section>
<div class="bg-holder overlay rounded" 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="position-relative text-center">
<h4 class="text-white">Video Background</h4>
</div>
</section>Youtube video
For more Details see YTPlayer Documentation⟶
Youtube Video Background
<section>
<div class="bg-holder rounded" style="background-image:url(../assets/img/headers/header-12.jpg);">
<div class="bg-youtube" data-property="{"videoURL":"https://www.youtube.com/watch?v=BYK1bkSO61c","startAt":7,"stopAt":58,"mute":true,"showYTLogo":false}"></div>
</div>
<div class="text-center position-relative">
<h4 class="text-white">Youtube Video Background</h4>
</div>
</section>Javascript
<script src="assets/lib/jquery.mb.ytplayer/jquery.mb.YTPlayer.min.js"></script>Stylesheet
<link href="assets/lib/jquery.mb.ytplayer/jquery.mb.YTPlayer.min.css" rel="stylesheet">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 rounded" style="background-image:url(../assets/img/headers/header-1.jpg);"></div>
<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/headers/header-2.jpg);"></div>
<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/headers/header-3.jpg);"></div>
<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="text-center py-7">
<div class="bg-holder overlay overlay-2 rounded" style="background-image:url(../assets/img/headers/header-12.jpg);">
<div class="bg-youtube" data-property="{"videoURL":"https://www.youtube.com/watch?v=BYK1bkSO61c","startAt":7,"stopAt":58,"mute":true,"showYTLogo":false}"></div>
</div>
<div class="position-relative text-center">
<h5 class="text-white">Youtube Background</h5>
<p class="text-white fs-1">(.overlay-2)</p>
</div>
</section>