Skip to content

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.

License

GPL-2.0, MIT licenses found

Licenses found

GPL-2.0
GPL-LICENSE.txt
MIT
MIT-LICENSE.txt
Notifications You must be signed in to change notification settings

chrisforrette/jquery-backstretch

 
 

Repository files navigation

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)

constrain

Setting this to true will make it so that the image is not stretched beyond its original dimensions (type=Boolean, default=false)

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.3

  • Added a ‘constrain’ option that defaults to false and, when set to true, the image will not be stretched beyond its original dimensions.

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

Please file a ticket on our Github issues tracker.

About

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.

Resources

License

GPL-2.0, MIT licenses found

Licenses found

GPL-2.0
GPL-LICENSE.txt
MIT
MIT-LICENSE.txt

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%