Parallax Backgrounds

Parallax is an effect where the background is moved at a different speed than the foreground content while scrolling.

Usage :

to apply the parallax effect on a block element add class parallax-bg with attribute data-src for the background image url.
scroll down to see the effect and the code.

Parallax Code :

<div class="parallax-bg" data-src="images/bg.jpg"></div>

Video Background :

to make A video background create a container with class video-bg then put your HTML5 Video Code inside of it.

Video Background Code :

<div class="main-container">
    <!-- Video BG -->
    <div class="video-bg">
        <video poster="images/poster.jpg" autoplay loop>
            <source src="images/bg.mp4" type="video/mp4">
        </video>
    </div>
    <!-- // Video BG -->
</div>