bgStretcher

Framework: jQuery Listed in: Effects

bgStretcher

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

Features

  1. Unobtrusive script, simple to setup
  2. Works with all modern browsers
  3. 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

Alex

November 24, 2009

F*#k*ng brilliant. Just what I needed

alex

December 15, 2009

hi! i just wondering is it possible to stop the script after clicking. I have an animated menu that works really bad if the transition on the background happening. i was trying to change a option to but it seems that it’s not working.

Thank you?

Darren – ajaxBlender

December 17, 2009

Thanks. This is a good request. We just updated bgStretcher script with two additional methods – pause() and play(), you can use them to control the background animation. Let me know if there are any issues.

Russell Slater

January 15, 2010

Hey, really nice script but some problems in IE6. These are quite evident just by opening the demo in IE6 and then scrolling down. For some reason there is a huge black block under the image. I really want to use this script but can’t seem to resolve this problem so please let us know if you manage to fix this. Thanks!

Andy

January 31, 2010

Hy, this is one of the best scripts I found on Internet and very easy to use.

My question is if it is possible to insert swf flash files instead of images. This would be great.

Regards.

Darren – ajaxBlender

February 1, 2010

Sure, it can be extended to display flash in the background, we will modify the script and post the changes soon. Thanks for the suggestion!

Darren – ajaxBlender

February 1, 2010

Chris at Cyber Ward made some good modifications to the bgstretcher script. Check them out here: http://www.cyberward.net/blog/code/bgstretcher2/.

Ryan

February 1, 2010

Is it possible to restrict how large the photo can be stretched so that it doesn’t pixelate? I have a use for this on a photographer’s website and they don’t want the photos larger than the original photo size.

Darren – ajaxBlender

February 3, 2010

Ryan, this is possible to restrict the photo dimensions. We will add this modification soon. Thanks for the suggestion!

Ryan

February 5, 2010

Thanks for the reply, Darren. I have visions of using this and then using PHP/Drupal to dynamically replace the photo. Might be tricky but it will be slick if I can pull it off.

Fernando

February 8, 2010

Great script! Is it possible to create a full screen image slider out of it? I would like to transition the images like a slider instead of fade. Is it possible to build such thing in JQuery?

me

February 11, 2010

Doesn’t work on IE6

efusien

February 11, 2010

Issue for IE6 :

IE6 is not supporting “position:fixed”, so you can add styles to have a graceful degradation.
I recommend to had the CSS styles below.

Your HTML source :

The ie6.css styles sheet :
/* Fix CSS styles for IE6 */
html {
background-image: url(/img/trans.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: none;
}
.bgstretcher {
position: absolute !important;
top: expression(documentElement.scrollTop+body.scrollTop + “px”);
left: 0;
}

Where “trans.gif” is a transparent 1×1 gif.
Careful : “background-color” must be set to none.
These additional styles fix the ie6 bug, without jumping effect.

Darren – ajaxBlender

February 11, 2010

Efusuen, thank you for the fix! We plan to update the script soon. We will include this in the next version. :)

mj

February 11, 2010

Great work!

Is there a way to disable the slideshow and have a “previous” and “next” button instead?

ajaxBlender.com

February 11, 2010

mj,

Chris at Cyber Ward made these mods for “previous” and next” buttons. They are pretty good. You can read more at his site here:
http://www.cyberward.net/blog/code/bgstretcher2/.

Thanks,

Alex

Fernando

February 13, 2010

Hey Darren, I’ve succesfully set up the script on my site but just realiced the photos don’t fade to one another but fade in/out. Is there a way to modify the script to animate both slides’ opacity to create the effect? I’ve seen the effect here: http://jonraasch.com/blog/a-simple-jquery-slideshow but I’m not ready to such complicated JS mix-up. thanks!

Leave a comment

Your name

March 10, 2010