Background Image

Background Image

<section>
    <div class="bg-container" style="background-image: url(../assets/img/headers/header-01.jpg)"></div>
    <div class="container">
        <div class="row align-items-center text-center">
            <div class="col position-relative">
                <h1 class="text-white text-uppercase">Background Image</h1>
            </div>
        </div>
    </div>
</section>

Parallax Background

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

Parallax Backgound

<section>
    <div class="bg-container parallax" data-rellax-percentage="0.5" data-rellax-speed="-1" style="background-image: url(../assets/img/headers/header-01.jpg)"></div>
    <div class="container">
        <div class="row align-items-center text-center">
            <div class="col position-relative">
                <h3 class="text-white text-uppercase">Parallax Backgound</h3>
            </div>
        </div>
    </div>
</section>

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

Background Video

YouTube Video

For more Details see YTPlayer Documentation

P

<section class="py-12 overflow-hidden">
    <div class="bg-container">
        <div class="bg-video youtube" data-property="{videoURL:'https://www.youtube.com/watch?v=wwLvEgEkERI', mute:true, showYTLogo:false, showControls: false, autoPlay:true, containment: 'self'}"></div>
    </div>
</section>

<!-- 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...

<section class="py-0 overflow-hidden">
    <div class="bg-container">
        <div class="bg-video vimeo" data-property="{videoURL:'https://vimeo.com/196936356', 'stopAt':45, autoPlay:true, mute:true, showControls: false, containment: 'self', loop: false}"></div>
    </div>
    <div class="container">
        <div class="row py-10 align-items-center">
            <div class="col position-relative">
                <h3 class="text-white text-center">And jazz hands...</h3>
            </div>
        </div>
    </div>
</section>

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

HTML5 Video

<section class="py-12 overflow-hidden">
    <div class="bg-container">
        <video class="bg-video" autoplay="autoplay" loop="loop" muted="muted">
            <source src="../assets/img/videos/video-01.mp4" type="video/mp4"/>
        </video>
    </div>
</section>

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

Overlay with 50% opacity