Want to know how fast is your server? Check out our all new tool - How Fast is My Server?

How to Add Responsive Full Screen Background Slider to Website


Adding a fullscreen background slider is a new trend in web development, fullscreen background looks great if you are creating a minimal website. In this tutorial we have shown how to add full screen background slider to your website that fits with mobile and tablets too.

There is a tiny jquery plugin called Backstretch which let you easily add background slider to your website. With this plugin you can add the slider to a particular element or to the whole body of your webpage.

Also read:

Steps to Add Full Screen Background Slider to Website

Here is how to add the background slider for your website

  1. Download the Backstretch plugin and place it in your js folder
  2. Add your background pictures to the “images” folder, crop them to 1500px width and 900px height
  3. Add jQuery and Backstretch libraries in the head section of your webpage
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="js/ jquery.backstretch.min.js"></script>

  5. Now let’s add the Backstretch code to slide your images in the background, add the following code before closing body tag i.e. </body><script type=”text/javascript”>
  6. $(document).ready(function($) {
    $.backstretch([
    "images/bg1.jpg",
    "images/bg2.jpg",
    "images/bg3.jpg"],
    {duration: 5000, fade: 1750});
    });
    </script>

That’s it, you can change the duration and fading time by changing respective variables.

How to Add Background Slider to a Particular DIV?

You can also add the background slider to a particular div by using Backstretch library, below is the code sample-
$(".mydiv").backstretch([
"images/bg1.jpg",
"images/bg2.jpg",
"images/bg3.jpg"],
{duration: 5000, fade: 1750});
});



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.


Leave a Reply


How to Add Responsive Full Screen Background Slider to Website

by Shrinivas time to read: 1 min
0