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="assets/img/backstretch/runners-unsplash.jpg,assets/img/backstretch/fence-unsplash.jpg,assets/img/backstretch/view-unsplash.jpg,assets/img/backstretch/bails-unsplash.jpg"></div>
For this boxed example the class
.page-boxed
is added to the body badge & the
data-toggle="backstretch"
element wraps the #navigation, #content & #footer elements.