How to Add Parallax Background Image to Your Website


Adding parallax background is a new trend in web development, it adds a fresh new look to your website and makes visitors scroll again and again to see the catchy effect. There are some jquery plugins available on the web to add this effect, in this tutorial we will use parallax.js to add simple parallax scrolling background effect to your website. So let’s get started with it.
Also Read:

Steps to Add Parallax Background image to Your Website

  1. First of all download the parallax.js library by pixelcog and add it to your js folder
  2. Choose a background image of 1500px width and 500px height and place it inside the image folder
  3. Now let’s start with HTML and jquery coding, open your website’s index.html or index.php with any code editor and include jQuery and parallax.js libraries in the head section
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/parallax.js"></script>
    
  5. Now let’s add the parallax background div, include the following HTML markup to add the parallax background where you wish
  6. <div class="parallax-window" data-parallax="scroll" data-image-src="image/background.jpg"></div>
    
  7. That’s it with HTML, now let’s add the jquery code to make parallax background work, add the following code before closing body tag
  8. <script type="text/javascript">
    $(document).ready(function (e) {
    if($('.parallax-window').length){
    $('.parallax-window').parallax();
    }
    });
    </script>
    

That’s it, we have added the scrolling parallax background effect in just 5 steps. You can add the text, images or icons inside the background div.
Check out the parallax background demo

Parallax Background Effect Not Showing Up in Bootstrap?

Have you followed all the steps but still parallax background effect is not visible in your Bootstrap based theme? Here is a small hack for this issue, include the following CSS to make the parallax background visible.

.parallax-mirror {
z-index:0 !important;
}


Article by Shrinivas Naik

Hi, This is Shrinivas I am a web developer and WordPress enthusiast. I am also a hobby blogger who loves to write about WordPress, web tools, blogging and technology.


2 comments on “How to Add Parallax Background Image to Your Website

Leave a Reply