Full Size Background Slideshow

Looking for the WordPress plugin of Backstretch, check it out here.

So as you can see from the above info box, I was asked to do a image background slideshow tutorial for iWeb. After looking online at a few examples, I came across one jquery slideshow called “Backstretch” which was developed by Scott Robbin. There are many of them out there, but for my iWeb audience, I chose this one for its simplicity. Of course you can use this in a non iWeb website as well. What this does is display a rotating set of images at full size within your page background.

Download Source  View Demo WordPress Plugin

iWeb Note: This tutorial requires you to edit your published iweb page to add the JS scripts within the <body> section of your html page. You can either use a text editor application, Coda, iWeb SEO Tools or any other program to help you. Also keep in mind that if you “re-publish” your page you will need to add this code back in again.
1. Download the provided source files above and upload the entire folder  to your server. The source files I have provided are a slimmed down version of what is provided from the original developer. This version only includes 3 demo images, the jquery.backstretch.js and optional hosted jquery.js file (The code below uses the Google hosted jquery file).

2. Find the published iweb html page you wish to add Backstretch to and open the file in your favorite HTML editor. You can also use iWeb SEO Tools from Rage Software to include these scripts before the closing </body> tag.

3. Copy and paste the following code within the <body> section of your page. For best results, you should place at the end prior to the closing of the body tag.

<!-- jQuery Library - Hosted via Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Backstretch JS -->
<script src="http://www.your_website.com/backstretch/js/jquery.backstretch.js"></script>
<script>
    $.backstretch([
      "http://www.your_website.com/backstretch/images/pot-holder.jpg",
      "http://www.your_website.com/backstretch/images/coffee.jpg",
      "http://www.your_website.com/backstretch/images/dome.jpg"
    ], {
    	fade: 750,	//Speed of Fade
    	duration: 4000 	// The length of Time the image is display
    });
</script>
You will need to alter the code above by changing the domain to match yours.
4. Save your edited page and load it in your favorite web browser, if you added the above code to the correct area of your html, and used the correct URL’s for the images and jquery.backstretch.js file, then it should load correctly. Remember the jquery library file we’re pulling from Google. So no need to alter that URL.

 Notes

  1. This slideshow only uses 1 transition, fade. The speed of the fade is controlled with the number in the js above.
  2. When you’re adding your images to the array in the js script, make sure each image is followed by a comma, the LAST one does not.

Hope you enjoyed this quick tutorial. Have a question or need some help, feel free leave a comment.

  1. Thanks, worked easy as pie.

    • Thank you for the great code, it works perfect.
      I still have a question:
      I want my slideshow to have 10 pictures, I tried but it stays stuck by picture 6…
      Can you help me to solve this problem?

      • It’ll work with more than 10 images. Do you have a live page where you have it so I can look at it?

        • Thank you a lot for replying.
          Acctualy a picture name wasn´t spelled correctely, that was the reason the slide show got stucked.
          It works perfectly now. Great reduced background slide show.
          best

  2. This code does not work for me. Would anyone happen to know anyway I could troubleshoot it?

  3. So cool and esay. Thank you so much for a great tutorial (been looking for long!)

  4. Hello , please can somebody help me how to add this on but only on the top of the page ( almost half ) i would say about Height : 700 px ? and should i put the image with only source or i can connect it thrue my website image source ( in document ) ? thank you for posting this slide

    • Hi Muhamed, You would need to apply it to a block element in your HTML markup that has a defined height instead of using the default body. You would position the block element with an absolute position and top:0 via CSS. The JS call would need to be placed at the end of your document before the closing body tag.

       #my_block_element {
      	height: 700px;
      	width: 100%;
      	display: block;
      	position: absolute;
      	top: 0;
      }
      
      
      

      I have a working example here.

  5. Hi there, great plugin, incredibly easy and functional.

    How do you add links?

    Site: http://www.skitrip.co

    Thanks! Just trying to figure out where to add the href

  6. Kerry,

    Really appreciate your followup, thank you!

    Cheers,
    Brad

  7. it stick to only 1 image slideshow is not happening pls help me
    the site is under development phase

  8. if I Have to upload 5 images in the slideshow then….

  9. hey Kerry it is working but i have to upload 5 images in the background pls help

  10. The site is not live pls help me how to add 5 images in the background slideshow

  11. thanks kerry it is working

  12. Hi I’m excited to use this valuable and fantastic script in my website. But there is a problem, My website is one page website and the main BG image is shown with css setting, so I’m in a big problem, how will i use it in my page… Please anyone help me….

  13. hiiiii Kerry
    Can I select what Images I want to show on each page?
    So there should only be 1 background picture per page and they should not move.
    pls reply

    • To display only one image, you would only have one image URL within in the JS. Example below. The Backstretch website shows this as the first demo.

      $.backstretch("http://website.com/your_image.jpg");
  14. Thank you very much. This code helped me a lot. 🙂

  15. hiii
    Kerry actualy I want one image per page ie there should be 1 image for home,another image for about us like this
    pls help

    • Unless I’m misunderstanding you, what I said prior is exactly what you would need. Each page would have it’s own backstretch script that has a different URL to a different image. Using the following will place only one image as the background and will not cycle as a slideshow.

      
      
      • Hi Kerry,

        I’m trying to add images, but they don’t work. Do i need to make them a jpg.LCK file, and how do i do that?

        Thanks for the plugin!

  16. Hi Kerry,
    I have followed the given instruction and placed the code to the web page that i wanted to test it in, but the slideshow is not responding, any help.
    Thanks.

  17. Man thats awsome, I was finding some thing like that for my site and now i got it. Thank you so much 😀
    Stay blessed..!!

  18. Thanks a lot Kerry!! This works great!!
    I was just wondering how i can add controll buttons to it so you can get easily to the previous picture or to the next?

    • Hi Jasper… Sorry, but this script doesn’t provide a pagination/control system out of the box. You can however target different images from a click event. There is an example of how the code would look like on the Backstretch website.

  19. Hello,
    Very nice Background Slideshow. I have only question if is possible change code to the background image was not full size (repeat in x and y) and not static?

  20. very nice plugin…bt need some help

    • Hi Akif, what do you need help with?

      • 1) i want to use background slider but only at half screen…

        2) and i have use it but my menu bar is fluctuating… i want menu bar should be constant…

        kindly chk link:
        http://iqrathetruth.com/laxmi/

        • If you don’t want it to use the full page, (body), then you need to assign and to another div. In you case, that div would be a certain height. To target a different div use the following as a guide.

               $("#my_div").backstretch("path_to_image.jpg");  //etc.
          
        • i follow your guide but its still is not working pls help:
          here is my code:

          $(“.container”).backstretch(
          “images/pot-holder.jpg”);
          “images/coffee.jpg”;
          “images/dome.jpg”;
          {
          fade: 750, //Speed of Fade
          duration: 4000 //Time of image display
          });

        • What is the page link you’re using backstretch on?

        • AKIF+HURZUK says:

          Kerry Kline…………….Thank you so so so much 🙂
          you solve my problem…..

  21. Nice stuff, really digging it

    Question, is it possible to have a shuffle option on this slideshow, based obviously on a selected group of images?

    Thanks

    • Looks like you can if you use the following approach to the JS call.

      • Thanks for the reply, Kerry.

        That did make the background shuffle, but it got fixed, like only one background image per page. Can i have it as a shuffled slideshow with the previous slide and fade duration options, so each page on the site has a different / shuffled slideshow sequence? How many options are there and how do I use them?

        Thanks again.

  22. King Size Thumbs Up Thank you

  23. how to pass array variable in place of image??

  24. I have a no words. you save my job.

    Thank you very much…

  25. Big thanks for this mate 🙂

  26. Very helpful. Thanks!

Comments are closed.