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

This version of bgStretcher is deprecated. New version of the script is available here.

bgStretcher (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).

New Version of bgStretcher!

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.3.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
$(document).bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>

4. Assign the content of your page to a DIV with the following CSS styles (we used a DIV#page for this sample):

#page {
z-index: 2;
position: relative;
}

5. Insert content of your page inside this DIV:

<body>
<div id="page">
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.
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.

Methods

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

Browser Compatibility

Tested in:

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

Leave a Comment

Anna

October 22, 2011

Hi I try to make background center with fixed size. Is it possibile? Is anyone can help me with soloution?

Jeanné

November 8, 2011

Thanks so much! Exactly what I was looking for! Works perfectly on Mac and Windows.

peter henderson

November 11, 2011

Hi, great work! Can I use this code in a template to sell on a template website? Ie for commercial use? Thanks

Puneet J.

January 10, 2012

Is there any example with transition between images like fade in ?

Many thanks

Puneet J.