Loading...
Background Image
Image Background
<section class="color-white text-center">
<div style="background-image:url(assets/images/about-header.jpg);" class="background-holder"></div>
<div class="text-center">
<h4>Image Background</h4>
</div>
</section>
Parallax Backgrounds
Use .parallax class with .background-holder class for effect.
Image Background Parallax
<section class="color-white text-center has-parallax">
<div class="background-holder overlay overlay-2 parallax h-100vh" style="background-image:url(assets/images/component-header.jpg);" data-rellax-speed="-10">
</div>
<div class="text-center">
<h5>Image Background Parallax</h5>
</div>
</section>
Video Background Parallax
<section class="color-white text-center has-parallax" id="header-video">
<div class="background-holder overlay overlay-2 parallax h-100vh" style="background-image:url(assets/images/backpack-header.jpg);" data-rellax-speed="-10">
<video autoplay="autoplay" loop="loop" muted="muted">
<source src="assets/videos/video" type="video/mp4"/>
</video>
</div>
<div>
<h5>Video Background Parallax</h5>
</div>
</section>
Video Background
Video Background
<section class="color-white text-center" id="header-video">
<div class="background-holder overlay" style="background-image:url(assets/images/herbal-header.jpg);">
<video autoplay="autoplay" loop="loop" muted="muted">
<source src="assets/videos/video" type="video/mp4"/>
</video>
</div>
<div>
<h5>Video Background</h5>
</div>
</section>Youtube video
Youtube Video Background
<section class="text-center py-7">
<div class="background-holder overlay overlay-2" style="background-image:url(http://img.youtube.com/vi/teLhLLlhfzc/maxresdefault.jpg);">
<div class="youtube-background" data-property={"videoURL":"http://www.youtube.com/watch?v=teLhLLlhfzc","startAt":10,"stopAt":584,"mute":true,"showYTLogo":false}></div>
</div>
<div class="text-center">
<h5 class="color-white">Video Background</h5>
</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)
Video Background
(.overlay-2)
<section class="text-center py-7">
<div class="background-holder overlay overlay-2" style="background-image:url(http://img.youtube.com/vi/teLhLLlhfzc/maxresdefault.jpg);">
<div class="youtube-background" data-property={"videoURL":"http://www.youtube.com/watch?v=teLhLLlhfzc","startAt":10,"stopAt":584,"mute":true,"showYTLogo":false}></div>
</div>
<div class="text-center">
<h5 class="color-white">Video Background</h5>
<h6 class="color-white">(.overlay-2)</h6>
</div>
</section>