nvdnkpr / jquery-backstretch

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.

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

There are a couple of examples included with this package, or feel free to check it out live on the project page itself.

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)

speed

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.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.backstretch.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>

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

<script type="text/javascript">
  $.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");
  });
</script>

Changelog

Version 1.2

• You can now called backstretch twice, 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.

Support

Basic support is offered through Github’s issues tracker. Many requests are resolved through the help of fellow Backstretch users and myself, however assistance is not guaranteed or timely.

If you are in need of immediate support, or would like customizations to the script, Premium Support is available for $17. Premium Support provides you with direct email access to me, and allows me to set time aside to help solve your problem quickly.