Submit your widget

Very using jQuery Anystretch effect

Created 11 years ago   Views 16642   downloads 1826    Author danmillar
Very using jQuery Anystretch effect
View DemoDownload
Share |

jQuery Anystretch

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.



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):

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/jquery.anystretch.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">
  $.anystretch("/path/to/image.jpg", {speed: 150});

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

<script type="text/javascript">
  $.anystretch("/path/to/image.jpg", {speed: 150});
  // Perhaps you'd like to change the image on a button click
  $(".button").click(function() {

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:

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

Read more: