jQuery Backstretch

Backstretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.

The first version of this plugin was created by Scott Robbin (srobbin.com) and is still maintained here : http://srobbin.com/jquery-plugins/backstretch/

This new version (1.3.0) is a full rewrite of the plugin with new options that offer maximum flexibility and greater control.
The new version is still 100% compatible with the previous plugin and can be used as a direct replacement without any code modification.

Demo

A couple of demos are included with this package.

Check these live examples :

• Basic Usage
• Dynamick loading of images on click
• Full slideshow with all options demo

Options

centeredX

The ratio of the width/height of the image doesn't always jive with the width/height of the window. This parameter controls whether or not we center the image on the X axis to account for the discrepancy. (type=Boolean, default=true)

centeredY

This parameter controls whether or not we center the image on the Y axis to account for the aforementioned discrepancy. (type=Boolean, default=true)

stretchMode

This parameter controls whether how the image is stretched to the screen. (type=String, default='crop') The supported values for this options are :

• crop (Default) : Allways cover the full screen.
• fit : Stretch the image so that it will fit inside the viewport.
• adapt : This option is a kind of medium alternative that will offer a good compromise between screen coverance and image cropped only when necessary. Thus, it will allways stretch image in landscape format to occupy full screen width, while image in portrait will allways be stretched vertically.

speed

This is the transition speed at which the next image will appear, after downloading is complete. Integers are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer, default=0)

transition

Supply a new transition function that takes the following parameters (image, speed, oldies, callback). Where :

• image is the new (currently invisible) image to display
• speed is the current setting for the speed of the transition
• oldies is the old image. This transition function SHOULD remove the old image after the transition is finished.
• callback. The transition function MUST call this callback function if supplied after the transition's end.

Setup

Include the jQuery library and Backstretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag):

Note: The example above uses the Google hosted version of jQuery.

    $.backstretch("/path/to/image.jpg", {speed: 150});

Want to change the image after Backstretch has been loaded? No problem, just call it again!

    $.backstretch("/path/to/image.jpg", {speed: 150});

    // Perhaps you'd like to change the image on a button click
    $(".button").click(function() {
        $.backstretch("/path/to/next_image.jpg");
    });

Changelog

Version 1.3

• Fully refactored version.
• Added the 'stretchMode' parameter to support multiple stretch options with regards of image orientation.
• New support for custom transitions.

Version 1.2

• You can now call backstretch() on the same element, and it will replace the existing image.

Version 1.1

• Added 'centeredX' and 'centeredY' options.
• Removed 'hideUntilReady' option. It looks pretty bad if you don't hide the image until it's fully loaded.
• Fixed IE img onload bug.
• Now supports iPhone/iPad orientation changes.