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 seeYTPlayer 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: "https://www.youtube.com/watch?v=hLpy-DRuiz0", 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>