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
- Download the Backstretch plugin and place it in your js folder
- Add your background pictures to the “images” folder, crop them to 1500px width and 900px height
- Add jQuery and Backstretch libraries in the head section of your webpage
- 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”>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/ jquery.backstretch.min.js"></script>
$(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});
});