Backgrounds

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

Background Image

Image Background

<section class="color-white text-center">
	<div style="background-image:url(assets/images/69.jpg);" class="background-holder"></div>
	<div class="text-center">
		<h4>Image Background</h4>
	</div>
</section>

Parallax Backgrounds

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

JavaScript

<script src="assets/lib/rellax/rellax.min.js"></script>

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/25.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/videos/giant-wheel/giant-wheel.jpg);" data-rellax-speed="-10">
		<video autoplay="autoplay" loop="loop" muted="muted">
			<source src="assets/videos/giant-wheel/giant-wheel.mp4" type="video/mp4"/>
		</video>
	</div>
	<div>
		<h5>Video Background Parallax</h5>
	</div>
</section>

Video Background

<section class="color-white text-center" id="header-video">
	<div class="background-holder overlay" style="background-image:url(assets/videos/giant-wheel/giant-wheel.jpg);">
		<video autoplay="autoplay" loop="loop" muted="muted">
			<source src="assets/videos/giant-wheel/giant-wheel.mp4" 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":"https://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":"https://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>