Gather Workshops Logo


Adding simple movement


Backstretch Logo

Allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

Download from here.

Include the plugin

<script src="jquery.backstretch.min.js"></script>

Add a script tag in the head of your html, linking to the plugin file.

Initialise the plugin

The backstretch website says to use the following code:

      {duration: 3000, fade: 750}

You can copy this code from the Backstretch website.

Make sure to put in your own image URLs!

Header-only slideshow

We can restrict our slideshow to be displayed inside an element.


We want ours to play in the background of the header, so we add $('header') to the start of our code.

Thumbs Up!

Intro Stuff: Complete!

Great, now it’s time for the fun stuff…

Take me to the next chapter!