Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Backstretch is a simple 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.
Tag: 1.0

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
GPL-LICENSE.txt
MIT-LICENSE.txt
README.textile
jquery.backstretch.js
jquery.backstretch.min.js

README.textile

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.

Demo

View the demo on the project page

Options

hideUntilReady

Should we show the background image as it’s downloading, or wait until download is complete? (type=Boolean, default=true)

speed

If hideUntilReady is set to true, this is the speed at which the image will fade in, after downloading is complete. Integers are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer, default=0)

Setup

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.backstretch-1.0.min.js"></script>

Note: The example above uses the Google hosted version of jQuery; there is also a jQuery source file included with this distribution, if you would like to host it yourself.

<script type="text/javascript">
  $.backstretch("/path/to/image.jpg", {speed: 150});
</script>

Support

Please file a ticket on our Github issues tracker.

Something went wrong with that request. Please try again.