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
bgStretcher 2011 (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).
bgStretcher 2011 has tons of new features suggested by our users. We appreciate all your feedback, and you will see below that we have implemented many new features and functions requested. Please continue to help us improve it by leaving suggestions in our comments area or you may contact us directly.
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.5.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 $('BODY').bgStretcher({ images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768 }); }); </script>
And if you want to initialize plugin for custom div use next:
<script type="text/javascript"> $(document).ready(function(){ // Initialize Backgound Stretcher $('.classname-of-div').bgStretcher({ images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768 }); }); </script>
4. Insert content of your page inside BODY or custom DIV:
<body> <div class="classname-of-div"> 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. |
| maxWidth | auto | Maximum image’s width. |
| maxHeight | auto | Maximum 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. |
| transitionEffect | fade | Transition effect (use also: none, simpleSlide, superSlide). |
| slideDirection | N | Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE). |
| sequenceMode | normal | Sequence mode (use also: back, random) |
| buttonPrev | empty | Previous button CSS selector |
| buttonNext | empty | Next button CSS selector |
| pagination | empty | CSS selector for pagination |
| anchoring | ‘left top’ | Anchoring bgStrtcher area regarding window |
| anchoringImg | ‘left top’ | Anchoring images regarding window |
| preloadImg | false | For Preload images use true |
| stratElementIndex | 0 | Start element index |
| callbackfunction | null | Name of callback function |
Methods
| Method Name | Description |
|---|---|
| $(objID).bgStretcher.play() | Resume background slideshow |
| $(objID).bgStretcher.pause() | Pause background slideshow |
| $(objID).bgStretcher.sliderDestroy() | Destroy background slideshow |
Browser Compatibility
Tested in:
- MS Internet Explorer 6, 7, 8, 9
- Mozilla Firefox 2, 3, 4
- Opera 9+
- Apple Safari
- Google Chrome




ajaxBlender.com
February 7, 2012
marcello,
this can be done, but would require some custom modifications to the code. email us if you would like us to create a custom mod for you.
thanks!
ajaxBlender.com
February 7, 2012
Justin,
this might just be a quick thing (a couple lines of code to add). please send the URL so we can see how you have it configured.
thanks!
Elliot from the design agency
February 9, 2012
This is a really nice effect, responsive too which is great, can’t wait to try it out on an up coming project.
Tech Blog – karachicorner
February 9, 2012
Its really amazing plugin specially background re-sizing feature, and now i m going to share this plug-in in my blog.
Thanks
Sascha
February 10, 2012
Saw the same with the jquery-backstretch plugin. But as always, new plugings should add some lines of code to use them as module like the amd specs. For me the biggest problem is that images get scaled within the code. There is no other solution, as far as i know. But users should avoid using big images and scale them down. For big webapps this is a performance problem, and i don’t mean async loading.
Adan Ova
February 10, 2012
Very nice plugin. However, it would be nicer if the image would always show a part of it, no matter how tiny the screen is. Right now, it will always show the upper left part of the image. Showing, for example, the face of the bear always would be a plus.
Luca
February 18, 2012
Hi, I do not know if I got right. But with this plugin is it possible to apply a stretchable background to a div that’s not the whole page background? I mean, can I apply it to a div embedded within other containers? I’m trying for a wordpress theme, but I got just an empty div.