bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area.

Framework: jQuery Listed in: Effects

Description

bgStretcher 2011 (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).
bgStretcher 2011 has tons of new features suggested by our users. We appreciate all your feedback, and you will see below that we have implemented many new features and functions requested. Please continue to help us improve it by leaving suggestions in our comments area or you may contact us directly.

Features

Unobtrusive script, simple to setup
Works with all modern browsers
Supports single and multiple images

How to Use

1. Download bgStretcher script. The package already contains the jQuery framework.

2. Add the following code to your <head>…</head> tag to connect jQuery framework, bgStretcher plugin and CSS. (Make sure paths to files are correct.)

<script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>
<link rel="stylesheet" href="../bgstretcher.css" />

3. Use the following code to initialize the bgStretcher (see Options section below for details):

<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>

And if you want to initialize plugin for custom div use next:

<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('.classname-of-div').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>

4. Insert content of your page inside BODY or custom DIV:

<body>
<div class="classname-of-div">
Your content goes here...
</div>
</body>

That’s it ;) Click the Demo button to see it in action.

Options

Configuration Option	Default Value	Description
imageContainer	bgstretcher	bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it’s constructed.
resizeProportionally	true	Indicates if background image(s) will be resized proportionally or not.
resizeAnimate	false	Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images	empty	An array containing list of images to be displayed on page’s background.
imageWidth	1024	Original image’s width.
imageHeight	768	Original image’s height.
maxWidth	auto	Maximum image’s width.
maxHeight	auto	Maximum image’s height.
nextSlideDelay	3000 (3 seconds)	Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed	normal	Numeric value in milliseconds or jQuery string value (’fast’, ‘normal’, ’slow’). The parameter sets the speed of transition between images.
slideShow	true	Allows or disallows slideshow functionality.
transitionEffect	fade	Transition effect (use also: none, simpleSlide, superSlide).
slideDirection	N	Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode	normal	Sequence mode (use also: back, random)
buttonPrev	empty	Previous button CSS selector
buttonNext	empty	Next button CSS selector
pagination	empty	CSS selector for pagination
anchoring	‘left top’	Anchoring bgStrtcher area regarding window
anchoringImg	‘left top’	Anchoring images regarding window
preloadImg	false	For Preload images use true
stratElementIndex	0	Start element index
callbackfunction	null	Name of callback function

Methods

Method Name	Description
$(objID).bgStretcher.play()	Resume background slideshow
$(objID).bgStretcher.pause()	Pause background slideshow
$(objID).bgStretcher.sliderDestroy()	Destroy background slideshow

Browser Compatibility

Tested in:

MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9+
Apple Safari
Google Chrome

Leave a Comment

ajaxBlender.com

February 7, 2012

marcello,

this can be done, but would require some custom modifications to the code. email us if you would like us to create a custom mod for you.

thanks!

ajaxBlender.com

February 7, 2012

Justin,

this might just be a quick thing (a couple lines of code to add). please send the URL so we can see how you have it configured.

thanks!

Elliot from the design agency

February 9, 2012

This is a really nice effect, responsive too which is great, can’t wait to try it out on an up coming project.

Tech Blog – karachicorner

February 9, 2012

Its really amazing plugin specially background re-sizing feature, and now i m going to share this plug-in in my blog.

Thanks

Sascha

February 10, 2012

Saw the same with the jquery-backstretch plugin. But as always, new plugings should add some lines of code to use them as module like the amd specs. For me the biggest problem is that images get scaled within the code. There is no other solution, as far as i know. But users should avoid using big images and scale them down. For big webapps this is a performance problem, and i don’t mean async loading.

Adan Ova

February 10, 2012

Very nice plugin. However, it would be nicer if the image would always show a part of it, no matter how tiny the screen is. Right now, it will always show the upper left part of the image. Showing, for example, the face of the bear always would be a plus.

Luca

February 18, 2012

Hi, I do not know if I got right. But with this plugin is it possible to apply a stretchable background to a div that’s not the whole page background? I mean, can I apply it to a div embedded within other containers? I’m trying for a wordpress theme, but I got just an empty div.