Skip to content

Backstretch Plugin

A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element seamless integrated into AppStrap.

Invoke backstretch using data-toggle="backstretch" on any element.

Options:

  • data-backstretch-target="SELECTOR" - element to apply backstretch to, if blank it will attach to the full page
  • data-backstretch-imgs="IMAGES" - a common separated list of images to use, multiple images will be made into a slideshow
  • data-duration="MILLISECONDS" - the amount of time in between slides
  • data-fade="MILLISECONDS" - value that determines how quickly the next image will fade in
  • data-backstretch-overlay="false" - default to true, applies semi transparent overlay to the backstretch target
  • data-backstretch-overlay-opacity="0.4" - the opacity value of the overlay (0 - 1), default is 0.7 setting via CSS

Example: 

              <div data-toggle="backstretch" data-backstretch-imgs="img/backstretch/runners-unsplash.jpg,img/backstretch/fence-unsplash.jpg,img/backstretch/view-unsplash.jpg,img/backstretch/bails-unsplash.jpg"></div>

For this boxed example the class .page-boxed is added to the body tag & the data-toggle="backstretch" element wraps the #navigation, #content & #footer elements.