Bootstrap parallax

Eye-catching, alluring and fascinating - only a few to words to describe Parallax - a design element, recognized by most web designer, who love to enrich their creations with more advanced constructions.

Parallaxes provide you with a charming effect of having two simultaneously progressing objects (in most of the cases - pictures and text fields), which both move with different speed.

It is worth to notice, that we have approached the topic of parallaxes in a different way, and made them purely in CSS. Thanks to that solution, they are way more responsive when it comes to other devices.

Live demo

Basic example Premium component

HTML construction


<!--Main parallax wrapper-->
<div class="parallax">

    <!--First section-->
    <div id="section-1" class="parallax-section">

        <!--Parallax content-->
        <div class="parallax-layer parallax-layer-base">

            <!--Container to center the content-->
            <div class="full-bg-img flex-center">
                <ul>
                    <li>
                        <h1 class="h1-responsive wow fadeInDown" data-wow-delay="0.2s">Parallax example</h1></li>
                    <li>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">Scroll down to see the parallax effect</p>
                    </li>
                    <li>
                        <a class="btn btn-outline-white btn-lg wow fadeInLeft" data-wow-delay="0.2s" ripple-radius><i class="fa fa-user left"></i> Button 1</a>
                        <a class="btn btn-outline-white btn-lg wow fadeInRight" data-wow-delay="0.2s" ripple-radius><i class="fa fa-book left"></i> Button 2</a>
                    </li>
                </ul>
            </div>
            <!--/Container to center the content-->

        </div>
        <!--/Parallax content-->

        <!--Parallax background-->
        <div class="parallax-layer parallax-layer-back">
        </div>
        <!--/Parallax background-->

    </div>
    <!--/First section-->

    <!--Dummy Content-->
    <div id="section-2">
        <div class="container text-center pt-1 mb-3">

            <div class="row">
                <div class="col-md-12 text-center">

                    <h1 class="mt-3 mb-3 h1-responsive">Heading</h1>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
                        inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
                        officia harum earum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
                        inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
                        officia harum earum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
                        inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
                        officia harum earum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
                        inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
                        officia harum earum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
                        inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
                        officia harum earum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore laboriosam autem ratione adipisci dignissimos praesentium qui, repudiandae inventore, unde, officia at quam explicabo eveniet deserunt necessitatibus enim. Doloribus,
                        inventore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus perspiciatis debitis quia porro aliquid magnam illum consequatur quaerat culpa in voluptates, adipisci assumenda consectetur quibusdam consequuntur
                        officia harum earum.</p>

                </div>
            </div>

        </div>
    </div>
    <!--Dummy Content-->

</div>
<!--/Main parallax wrapper-->
        

Set your options via CSS:


/*Parallax section*/
#section-1 {
    z-index: 1;
    color: #fff;
    height: 100vh;
}
#section-1 .row {
    position: fixed;
}
/*Parallax background*/
#section-1 .parallax-layer-back {
    background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(2).jpg")no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
/*Section with dummy content*/
#section-2 {
    z-index: 2;
    position: relative;
    background: #fff;
    width: 100%;
}