Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element.
The image will stretch to fit the page/element, and will automatically resize as the window size changes.
An example is provided within this package. To see it in action go to: http://wearyoubelong.com
This parameter controls how we position the image on the X axis. (type=String, options=left|center|right, default=center)
This parameter controls how we position the image on the Y axis. (type=String, options=top|center|bottom, default=center)
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)
elPosition (only when not used on the body)
This is the css position given to the containing element when used on anything except the body. (type=String, default=relative)
Include the jQuery library and Anystretch 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.
Want to change the image after Anystretch has been loaded? No problem, just call it again!
If you require Anystretch to work on one or more elements inside the page, rather than the page itself, simply call it on the element:
- Changed options from centeredX/centeredY to positionX/positionY to allow for greater control
- This was forked from Backstretch (version 1.2)