Skip to content
🌅 backgroundStretch2x is a lite jQuery plugin that adds images in the background dynamically. The images are resized according to the window size or its element container. This plugin is optimized to download images in low resolution then in high resolution for a better render with retina display (device pixel ratio: 2).
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
LICENSE.md
README.md
demo1.html
demo2.html
demo3.html
jquery.backgroundStretch2x.js
jquery.backgroundStretch2x.min.js

README.md

$.backgroundStretch2x()

backgroundStretch2x is a lite jQuery plugin that adds images in the background dynamically. The images are resized according to the window size or its element container. This plugin is optimized to download images in low resolution then in high resolution for a better render with retina display (device pixel ratio: 2).

The plugin works in 4 steps :

  • It loads the first image in low resolution ( img-1.jpg )
  • Then, this same image in high resolution ( img-1-2x.jpg )
  • Then, the other images are loaded in high resolution ( img-XX-2x.jpg )
  • Finally, the fade starts...

Installation

The image filename be named like this (the resolution is free, but must be double for the file "-2x.ext").

image-1.jpg (800x600) et image-1-2x.jpg (1600*1200)

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.backgroundStretch2x.min.js"></script>
<script>
$(function(){
	// use a BODY
	$.backgroundStretch2x(
		['images/image-1-2x.jpg','images/image-2-2x.jpg','images/image-3-2x.jpg']
		);
	// or
	$('body').backgroundStretch2x( ['images/image-1-2x.jpg'] );
	
	// use a DIV
	$('#my-div').backgroundStretch2x(
		['images/image-1-2x.jpg','images/image-2-2x.jpg','images/image-3-2x.jpg'], {
			// options
			wait: 6000,
			fade: 1000,
			suffle: true
		});
});
</script>

Options

Name Description Type Default
wait Waiting time in milliseconds between 2 images. Integer ms 5000
fade Time of fade in milliseconds. Integer ms 2000
color Display background color between the images. You can use all the colors used in css. Eg:black, #000, #fff... String ''
shuffle Shuffle images before starting. Boolean false
centerX Centering the image in X axis with percentage. Float 0.0 to 1.0 0.5
centerY Centering the image in Y axis with percentage. Float 0.0 to 1.0 0.5
proportional Resizing images proportionally. Boolean true
onLoad All images are loaded. Function null
onChange The fade will start. Function null
onComplete The fade is completed. Function null
styles DIV styles: { left:0, top:0, overflow:'hidden', zIndex:-32000 } Object { .. }
template HTML: <div class="background-stretch-2x"></div> String html < .. >
You can’t perform that action at this time.