caleuanhopkins / 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.

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.

Demo

An example is provided within this package. To see it in action go to: http://wearyoubelong.com

Options

positionX

This parameter controls how we position the image on the X axis. (type=String, options=left|center|right, default=center)

positionY

This parameter controls how we position the image on the Y axis. (type=String, options=top|center|bottom, default=center)

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)

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)

dataName

The name of the data attribute that Anystretch will use for the image name, if none is supplied in the src. (type=String, default=stretch)

Setup

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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></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});
</script>

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() {
      $.anystretch("/path/to/next_image.jpg");
  });
</script>

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});
</script>

As of Version 1.2, Anystretch can also determine the image to use, via a data attribute. By default, Anystretch will use data-stretch although this can be changed by setting the dataName in the settings.

<script type="text/javascript">
  $(".stretchMe").anystretch();
</script>

<div class="stretchMe" data-stretch="img03.jpg"></div>

Responsive Images

As of version 1.2.5, Anystretch now supports multiple images for reducing data transfer sizes on small screen devices. Behaviour of this matches the suggestions Eric Portis outlined in his 2014 article “Responsive Images in Practice”.

<div class="stretchMe" data-stretch-responsive="img02.jpg 1200w,img03.jpg 800w,img01.jpg 0w"></div>

NOTE: you must have 0w option as this is the fallback image for all screens sizes.

Non-Background Behaviour

Want Anystretch behaviour on your material card design?

<div class="stretchMe" data-stretch-nonbg="true"></div>

Image will scale with screen size and will sit above content. See the demo.html file in the “examples” folder of this repo.

Changelog

Version 1.2

• Added dataName, to allow automatic image usage via data-anystretch (default)

Version 1.1

• Changed options from centeredX/centeredY to positionX/positionY to allow for greater control

Version 1.0

• This was forked from Backstretch (version 1.2)