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

{code type=html}
<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” />
{/code}

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

{code type=php}
<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>
{/code}

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

{code type=css}
#page {
z-index: 2;
position: relative;
}
{/code}

5. Insert content of your page inside this DIV:

{code type=html}
<body>
<div id=”page”>
Your content goes here…
</div>
</body>
{/code}

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

TIP:
You can check some hosts that won’t give any problems related to browser compatibility and to script languages.

Leave a Comment

Sam c

October 19, 2011

Something I’m working on at the moment using CSS and JavaScript. Its similar to this outcome but doesn’t work on iPads and iPhones. Does your jquery work on iPads and iPhones?I’m tryin to find a solution to the problem I’m having.

Thanks
Sam

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.

ajaxBlender.com

February 9, 2012

The new version of bgStretcher is here:

http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

laan

February 16, 2012

Can this jQuery plug-in also be used for normal blogs made with blogger, or only wordpress?

Kodokuna

February 25, 2012

Hi im new and have a question that is a little stupid XD … i saw that the pictures in any page are loaded name by name. is there a way to load a file from where the js get all the photos inside? thanks

Watt Communication

March 9, 2012

Simple and very nice script ! Thanks !

irfan arif

March 10, 2012

This is my very first website I have not developed any website before.

I developed it using bgstretcher but having some problems on Opening of this website background images slides without downloading full images. I want to make it first download background images, then display the page…

Please help me out..
thanks

Djelda

March 21, 2012

Hello,
Can we put links url on the slide, please ?
Thank your for your help ;))

john sherry

March 22, 2012

Hi there, desperately need your help.
I installed everything following your instructions and it works fine in Firefox but as you can see doesnt work in any version of i.e. Can you help me please?

the site is http://www.thepinoystore.com

Many thanks. John

Darren – ajaxBlender

March 23, 2012

John Sherry,

From looking at the URL you posted, I see it is working fine in IE. Maybe the issue is in IE6? If so, it is probably just related to – position:fixed. Give it a try, and let us know. Feel free to email us too.

Thanks,

Darren

Phil

March 27, 2012

what property would you adjust so you only want it to stretch the height to a specific width?

baz

April 2, 2012

is there anyway to use .swf instead of .jpg? i.e, if you want an animating background?

chandelier

May 13, 2012

Is there anyway to use .swf instead of .jpg? if i want an animated background?

culona

May 24, 2012

Is there anyway to use .swf instead of .jpg? i.e, if you want an animating background?

Jay

June 15, 2012

Hey guys, this plugin does not work for div rather then body. Because in one of my project i need to show some slideshows with auto resize feature of images. If anyone know this, please help me soon..

June 21, 2012

Hello,
Can we put links url on the slide, please ?
Thank your for your help ;))

Eder Eduardo

July 5, 2012

Hello, I think that you do not need to use the element $(document) to call the function. I believe that you can use $(’body’) and it will perform better!

Josh

July 18, 2012

Just a heads up… The latest version of Java combined with bgstretcher causes your browser to freeze. I had to roll back to the deprecated version to get it to work with Java.

TY3

October 30, 2012

I have used your JS on http://mp.df-kunde.de/_testsystem/. Thanks a lot for it! On subpages the content is cut or truncated, because the DIV-class bgstretcher-area seems to be fixed. What can be done for a flexible height? Greetings from Germany!

Casey – ajaxBlender

November 2, 2012

TY3,

From looking at the url, if you do not need it to stretch to fit the screen’s height/width exactly, you shouldn’t use bgStretcher. Just set the image to 100% width with the height set to auto. The image would need to be in a layer beneath the content. This way the image will stretch to 100% of the screen, but the bottom wouldn’t be cut off.

I hope this makes sense?

But, if you are using the slide show features of background stretcher, then that might require a different answer. Clarify this, and I’ll be glad to look again. From another review, it almost seems like you may have already fixed the issue. I don’t see any truncated content. Post a reply or email us at support@ajaxblender.com.

Thanks,

Casey

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