bgStretcher
Framework: jQuery Listed in: Effects
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
- 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
Popular Categories
View All- Effects (7)
- Forms (6)
- Lightboxes (5)
- Photo Galleries (1)
- Preloaders (1)
- Tables (1)
- Tooltips (3)
- User Interface (10)
AJAX Tutorials
View All- How to Add Hints & Auto Focus Form Fields using jQuery
- Convert Images to Grayscale
- Advanced Plugins Development with ExtJS
- Rotate Images Using JavaScript
- Create Custom Cursors without .cur File
- Convert ASCII Character to Hex, Decimal and Binary Code
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 successfully set up the script on my site but just realized 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!
julio
March 28, 2010
I would like to have the same gallery, but instead of adjusting the size of the pictures as being 100% of the width of the browser’s page, I would like it to adjust to the height of the browser’spage. In this way, the whole picture is always show. I would proble get empty sidebars if I have a portrait picture format, but i believe this is better then missing a part of the picture. The whole composition of the picture is important to me. How do I do that? (knowing that I am a newbie to jquery)?
Darren – ajaxBlender
March 30, 2010
Fernando, actually no they fade in / out, but the provided link operates with small images which fades in / out smoothly. the large background images would requires more RAM / CPU resources and could look different on slower PC’s.
Darren – ajaxBlender
March 30, 2010
julio, you can do this by just commenting out lines 65-68 on bgstretcher.js. let me know if it works okay.
Julio
April 1, 2010
Thanks for the help Darren.
I have another question:
How do I disable the fade in / fade out effect of the slideshow?
And how do I make the webpage launch with the slideshow initially paused?
Darren – ajaxBlender
April 6, 2010
hi julio, here is the solution:
to disable fade in / out effect you should pass “slideShowSpeed: 0″ as the parameter.
for example:
$(document).bgStretcher({ images: [...], imageWidth:…, imageHeight:…, slideShowSpeed: 0 });
to disable the slideshow on the start, just use $(document).bgStretcher.pause(); right after you initialize bgStretcher.
i tested it, but let me know if you encounter any issues. thanks!
Stephan
April 7, 2010
Hi there,
very nice! Is it possible to add some other transition effetcs like slide out/in or is only fade transition possible?
thanks and greets
Stephan
Julio
April 20, 2010
Hi Darren,
Thanks for the help. It did work but it created a little problem: the first time you click on the NEXT or PREV button I created, it does not change the picture, the you click once again, then it works. It is like you have to click twice to get the NEXT or PREV button going. How can I fix that?
Hadrien
April 28, 2010
Awesome script. I disabled the slide show feature but would like to use a rotate feature so one of four random images will appear when refreshing or hitting a new page on the site. Any suggestion?
Darren – ajaxBlender
May 26, 2010
alex says we are going to release a new version of bgstretcher (and create extensions for wordpress and for WWB). email us or leave a comment on “wishlist” items. thanks!
Marcus
June 8, 2010
Hi Darren- Awesome Script! Is there a way to randomize the images on load or refresh? I have tried a couple things without success. Thanks!
Darren – ajaxBlender
June 10, 2010
Marcus, thanks for the comment… we will have this in the next version!
Yann
June 20, 2010
Hi guys, great script indeed, thx for it.
Could you help me though ? I wish to use both bgstretcher to have my background img always fit the entire page (no slideshow) and the jQuery Cycle Plugin to have a slideshow with fade effects inside a DIV. But both librairies don’t seem to be compatible. How can I change that ? Or use only one for both uses ? Thx in advance !
Darren – ajaxBlender
June 21, 2010
Yann, sure, you should just need to run “$(document).bgStretcher.pause();” and then animate the contents of the bgstretcher script using jQuery Cycle Plugin…. you can access it via $(’#bgstretcher UL LI’) after bgStretcher has been initialized
ersma
June 25, 2010
thats awesome…very good work! thanks.
can i use this script for an commercial project?
Andy
June 25, 2010
Hi
Excellent script.
I read Marcus comment and tried tying it up with a random image script. But all I get is a broken link for the image.
Is there a way to set it up to display random images?
This is what I’ve tried
$(document).ready(function(){
//this is the part to generate the random pics
var theImages = new Array()
theImages[0] = ‘images/sample-1.jpg’
theImages[1] = ‘images/sample-2.jpg’
theImages[2] = ‘images/sample-3.jpg’
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
}
$(document).bgStretcher({images: [whichImage],imageWidth: 1024, imageHeight: 768,nextSlideDelay: 5000,resizeProportionally: true,});
then I placed this in $(document).bgStretcher({ … });
images: [whichImage],
thanks for any suggestions
Darren – ajaxBlender
June 26, 2010
ersma, yes sure! we would appreciate if you will leave our credits though. or tell your friend we like to code ajax :) good luck!
ajaxBlender.com
June 27, 2010
Andy,
Thank you for your comment about the script. I think to solve the issue with random images, you should change the initialization of the images property to “images: [theImages[whichImage]]”. This should make the back ground stretcher load random images.
Thanks,
Alex
Rachel
June 27, 2010
Hi, I used this script for a website and it works fantastic. I am wondering if it is possible to anchor the image to the bottom of the browser window? It seems to be anchoring to the top, so when the window resizes it loses the image below the browser window. Basically, I was hoping to reverse that somehow? Thanks in advance for your help.
ajaxBlender.com
July 2, 2010
Rachel,
I’m glad you like the script. We are preparing a new version of bgStretcher and the new release will include this change. We will post it here once it is complete. Please post any other requests and we will try to include as many as possible in this (and/or future releases).
Thanks,
Alex
Marcus
July 8, 2010
Hi Darren- I tried a randomizing php script in the image array and it worked (faked the .php as the image source. All the images in the folder containing the php will randomly load on refresh.):
$(document).ready(function(){
// Initialize Backgound Stretcher
$(document).bgStretcher({
images: ['images/index/random.php'],
imageWidth: 1344, imageHeight: 840
});
});
Here is the PHP script:
< ?php
$folder = '.';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>
Darren – ajaxBlender
July 12, 2010
Marcus, yes this is a solution too. thanks for posting it, but it may load your server if you have a lot of traffic/visitors because passing images through a GD2 lib is not the most efficient method. if you still want to use PHP you could just output a random name of the image for example:
images: [< ?= $url_to_your_random_image_file ?>].hope this helps too.
flyinasunbeam
July 14, 2010
Hello.
Very neat script. I was wondering if there was a way to only get the photos to stretch to a certain point in the page (say leaving 150px at the bottom for a footer?). Or is there any easy way to make a footer appear in front of the image? I have been fiddling with this for some time and would welcome any ideas. :]
seth
July 22, 2010
I know this is a little picky, but is there any possible way to do a preload on the image(s) that are being stretched?
chris
July 26, 2010
How do I call this and change the image from a link? Instead of only images from on page load.
Melissa
July 28, 2010
I am attempting to use .bgstretcher with jQuery elements (lightbox and the accordion script) and they seem to cancel each other out (either the background image works and breaks the lightbox and accordion effect of the text, or the lightbox & accordion works and the background doesn’t). Is there any way to bypass this?
jen
August 2, 2010
Hi, thank you for sharing.
How would I add navigation to link each image without modifying the js?
Francesco
August 6, 2010
Some comments about bgstretcher: the script it’s crazy cool, but I think it’s better if the the script, when the image is clipped horizontally, keeps centered horizontally.. Is there a simple way to achieve that feature?
Many thanks,
Seth
August 23, 2010
Great script but is there a possible way to make the script functional or at least make the background fit in mobile devices like the iPhone and iPad?