Sign in


Sign up


Bootstrap parallax

Bootstrap parallax is a design effect visible while scrolling down - background image is moving with a different speed than the foreground content.

Live demo

Basic example MDB Pro component

HTML construction

                                    
<!--Main Navigation-->
<header>

    <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
        <div class="mask rgba-white-light">
            <div class="container flex-center text-center">
              <div class="row mt-5">
                <div class="col-md-12 wow fadeIn mb-3">
                  <h1 class="display-3 mb-2 wow fadeInDown" data-wow-delay="0.3s">NATALIE <a class="indigo-text font-weight-bold">SMITH</a></h1>
                  <h5 class="text-uppercase mb-3 mt-1 font-weight-bold wow fadeIn" data-wow-delay="0.4s">Web developer & graphic designer</h5>
                  <a class="btn btn-light-blue btn-lg wow fadeIn" data-wow-delay="0.4s">portfolio</a> <a class="btn btn-indigo btn-lg wow fadeIn" data-wow-delay="0.4s">About me</a>
                </div>
              </div>
            </div>
        </div>
      </div>

      <div class="container">

          <!--Grid row-->
          <div class="row">

              <!--Grid column-->
              <div class="col-md-12 text-center mb-3">

                  <h1 class="font-weight-bold light-blue-text my-3">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>
                  <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>

              </div>
              <!--Grid column-->

          </div>
          <!--Grid row-->

      </div>

      <div class="view jarallax intro-2" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/food2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
          <div class="mask rgba-pink-slight">
          </div>
      </div>

      <div class="view jarallax intro-2" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
          <div class="mask rgba-purple-slight">
              <div class="container h-100 d-flex align-items-center d-flex justify-content-center">
                  <div class="row mt-5">
                      <div class="col-md-12 wow fadeIn mb-3">
                          <div class="intro-info-content text-center">
                              <h1 class="display-1 white-text mb-2 wow fadeInDown" data-wow-delay="0.3s">Welcome on my page!</h1>
                              <h4 class="mb-3 mt-1 white-text font-weight-bold wow fadeIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet</h4>
                              <a class="btn btn-pink wow fadeIn" data-wow-delay="0.4s">Read more</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <div class="container">

          <!--Grid row-->
          <div class="row">

              <!--Grid column-->
              <div class="col-md-12 text-center my-3">

                  <h1 class="font-weight-bold pink-text mb-3">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>
                  <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>

              </div>
              <!--Grid column-->

          </div>
          <!--Grid row-->

      </div>

</header>
<!--Main Navigation-->
                                    
                                
                                    
html,
body,
header,
.jarallax {
  height: 100vh;
}

html,
body,
header,
.intro-2 {
  height: 700px;
}
                                    
                                  

Options

Options can be passed in data-jarallax attribute.

Name Type Default Description
type string scroll scroll, scale, opacity, scroll-opacity, scale-opacity.
speed float 0.5 Parallax effect speed. Provide numbers from -1.0 to 2.0.
imgSrc path null Image url. By default used image from background.
imgElement dom / selector .jarallax-img Image tag that will be used as background.
imgSize string cover Image size. If you use <img> tag for background, you should add object-fit values, else use background-size values.
imgPosition string 50% 50% Image position. If you use <img> tag for background, you should add object-position values, else use background-position values.
imgRepeat string no-repeat Image repeat. Supported only background-position values.
keepImg boolean false Keep <img> tag in it's default place after Jarallax inited.
elementInViewport dom null Use custom DOM / jQuery element to check if parallax block in viewport. More info here - Issue 13.
zIndex number -100 z-index of parallax container.
noAndroid boolean false Disable parallax on Android devices.
noIos boolean false Disable parallax on iOs devices.