# Backgrounds

All 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/header-02.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/header-03.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/video.jpg);" data-rellax-speed="-10">
    		<video autoplay="autoplay" loop="loop" muted="muted">
    			<source src="assets/videos/demo/video.webm" type="video/webm"/>
    			<source src="assets/videos/demo/video.mp4" type="video/mp4"/>
    			<source src="assets/videos/demo/video.ogv" type="video/ogv"/>
    		</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/images/video.jpg);">
    		<video autoplay="autoplay" loop="loop" muted="muted">
    			<source src="assets/videos/demo/video.webm" type="video/webm"/>
    			<source src="assets/videos/demo/video.mp4" type="video/mp4"/>
    			<source src="assets/videos/demo/video.ogv" type="video/ogv"/>
    		</video>
    	</div>
    	<div>
    		<h5>Video Background</h5>
    	</div>
    </section>

#### Youtube video

#### Youtube Video Background

    <section>
    	<div class="background-holder" style="background-image:url(http://img.youtube.com/vi/L3V7LKYPIUQ/maxresdefault.jpg);">
    		<div class="youtube-background" data-video-url="http://youtu.be/L3V7LKYPIUQ" data-start-at="0" data-stop-at="444"></div>
    	</div>
    	<div class="text-center">
    		<h4 class="color-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)

##### Video Background

###### (.overlay-2)

    <section class="color-white text-center py-7">
    	<div style="background-image:url(assets/images/header-02.jpg);" class="background-holder overlay overlay-1"></div>
    	<div class="text-center">
    		<h5>Image Background</h5>
    		<h6>(.overlay-1)</h6>
    	</div>
    </section>

##### Jump into