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 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)
This parameter controls whether or not we center the image on the Y axis to account for the aforementioned discrepancy. (type=Boolean, default=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)
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; there is also a jQuery source file included with this distribution, if you would like to host it yourself.
- 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.
Please file a ticket on our Github issues tracker.