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:

• How My Website Looks With Various Google Fonts?
• List of Awesome CSS Preloader Kits for Your Website [Best of the Web]

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.js"></script>

4. Now let’s add the parallax background div, include the following HTML markup to add the parallax background where you wish

<div class="parallax-window" data-parallax="scroll" data-image-src="image/background.jpg"></div>

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

<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;
}

• CSS
• HTML
• jQuery
• Parallax