Backgrounds

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

Background Image

Parallax Background

Use .parallax class with .bg-container class for effect.

Parallax Backgound


<!-- Vendor Javascripts -->
<script src="../assets/vendor/rellax/rellax.min.js"></script>

Background Video

YouTube Video

For more Details see YTPlayer Documentation


<!-- Vendor Javascripts -->
<script src="../assets/vendor/jquery.mb.ytplayer/dist/jquery.mb.YTPlayer.min.js"></script>

Vimeo Video

For more Details see vimeoPlayer Documentation

And jazz hands...


<!-- Vendor Javascripts -->
<script src="../assets/vendor/jquery.mb.vimeo_player/dist/jquery.mb.vimeo_player.min.js"></script>

HTML5 Video

Overlays

Use following classess with .overlay .overlay-{value} class for different shades. Values means the opacity of the overlay. 0.5 opacity is the dafault value.

.overlay-0: 0
.overlay-10: 0.1
.overlay-20: 0.2
.overlay-30: 0.3
.overlay-40: 0.4
.overlay-50: 0.5
.overlay-60: 0.6
.overlay-70: 0.7
.overlay-80: 0.8
.overlay-90: 0.9
.overlay-100: 1