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 (5)
- Lightboxes (5)
- Photo Galleries (1)
- Preloaders (1)
- Tables (1)
- Tooltips (3)
- User Interface (9)
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
Advertising
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!