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

Framework: jQuery Listed in: Effects

That's right! For only $49.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!
bgStretcher II

Description

A new version of bgStretcher 3 is available at Code Canyon.

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

  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.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
That's right! For only $49.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!

ajaxBlender.com

August 25, 2014

Rohit,

It sounds like you may be using an older version of bgStretcher. It could also be a conflict with scripts on your site if you are using JS to style the form elements.

Please confirm you have the latest version of bgStretcher over at Code Canyon. If there is still an issue, you can email support@w3blender.com or post a comment on the bgStretcher page at Code Canyon and our team will assist. Please be sure to supply the URL where the problem is occurring.

Thanks,

w3Blender Team

Rohit

August 22, 2014

After using it, Input fields on my page gets hide.
please advice

Jo

May 3, 2013

Having trouble implementing this and getting it to work. The only thing I changed in the code is the image name and the size, and its not working at all.

here is my code:

$(document).ready(function(){
// Initialize Backgound Stretcher
$(’BODY’).bgStretcher({
images: ['images/cubed-background.png'], imageWidth: 1080, imageHeight: 810
});
});

greg

February 6, 2013

Can’t have 2 bgstretchers on one page?

Nick

February 1, 2013

I have used bgstretcher successfully on a few project, thank you for your plugin.

However I am having a strange issue on my latest site, when I try to call bgstretcher on the body tag:

$(’body’).bgStretcher

Timestamp: 2/1/13 4:17:37 PM
Error: TypeError: $.browser is undefined
Source File: stage2.curran-connors.com/anderson/js/bgstretcher.js
Line: 159

Any idea why this would be happening?

Casey – ajaxBlender

January 22, 2013

Anjay, you can use the imageHeight and imageWidth properties to set the original image height and width.

Nick, it appears that bgStretcher II is using a function that has been removed from jQuery 1.9.0 (the latest version). We will be updating bgStretcher soon, but for the time being, you can user an older version of jQuery. Unfortunately I cannot provide a better solution than this right now, but we will be updating the plugin soon. Thanks for catching the error and letting us know!

Ajay

January 21, 2013

How do you set original image height and width?

Denis

November 6, 2012

Sorry, i’m idiot. The solution (pause the animation with callback function) was already written in the previous comments and I had not noticed.

Denis

October 23, 2012

Great script.
I have a question: is it possible to stop the animation automatically at the end of the fade?

ajaxBlender.com

October 18, 2012

Bruce,

I checked in IE9 and can’t recreate the issue. What version of IE are you using? And what is your screen resolution?

Thanks,

Travis

Bruce

October 18, 2012

Sorry guys, but this tool doesn’t work in IE ;( Check my website in IE web-producties.nl and you will see. But in Chrome and Firefox it works great!

ajaxBlender.com

October 2, 2012

Hi Steve,

There is pause and resume functionality in the slider, by default. This is in the documentation, But from the demo page, you can review the JavaScript for it, and apply this to the image, instead of a link. Also, see the comment by Darren on 08-28-2011. Hope this helps.

Thanks!

Travis

Steve

September 27, 2012

Is it possible to have the slideshow pause when clicking on an image (link)? Thanks!

Andre

September 13, 2012

Hey! Great plugin. I want to display #prev en #next with more than 1 image and hide them if I have only one image. How can I do that?

ajaxBlender.com

August 31, 2012

John,

There could be problem with case sensitivity (bgStretcher instead of bgstretcher) or a problem with linking the bgStretcher script.

Could you please provide (or email) the URL to us and we will inspect the source code. This should not take too long to review. With access to it, we will be able to tell you exactly where the issue is.

Thanks,

Travis

john

August 29, 2012

Hi, Thanks for that, i tried it and got the same error…

ajaxBlender.com

August 28, 2012

John,

$('body').bgstretcher.pause;

should be:

$('body').bgstretcher.pause();

Let me know if that doesn’t work for you.

Thanks!

Travis

John

August 27, 2012

I’m Still having difficulties getting the bgstretcher to stop on last step.

I ‘know’ that I have 3 images (although it would be great to work with any number of images) and am using the following code:

slideShow: true, callbackfunction:function () { if ($('.bgs-current').index() == 2) { $('body').bgstretcher.pause;}}

In Firefox it seems to work, but in ie it stops the page from loading. It then also (in FF) gives the following error:

TypeError: $("body").bgstretcher is undefined

It is included in the page like so:

$('body').bgStretcher({

Does anyone have any suggestions what I’m doing wrong?

Many thanks,

John

Ken

August 24, 2012

Hey Casey,
If I want to add a link for each background images,what am I gonna do?

Look forward to you help.

Thanks.

Kim Williams

August 20, 2012

The background is not stretching in IE or AOL. It works great in Firefox.

Casey – ajaxBlender

August 11, 2012

Hello Dejan,

Unfortunately we were unable to recreate the issue you are describing. Would it be possible for you to provide a link to the site where you have installed the script? We can take a look at it and see if there is a simple solution. Please post the link here or email us at support@htmlblender.com

Thank you,

Casey

Dejan

August 9, 2012

Hey, when i try to set some different “transitionEffect” it just breaks the plugin? Even if i set it to default “transitionEffect: fade” it’s not working. It only works when i completely remove it. any idea?
Thanks

Casey – ajaxBlender

August 8, 2012

Hello Kristoffer,

We took a look at the link you provided, however there does not seem to be a simple solution. If you would like further assistance with configuring this script on your site, please contact us at support@ajaxblender.com

Thank you,

Casey

Kristoffer Eriksen

August 3, 2012

Hey
I’m still having problems with the issue written above

“Hey
I’m having a problem with the start and pause function.
When I start the slideshow on this site heyesindk.com/ i skips the first image, and goes to the second image. I shows a quick fadein/fadeout with image #1 and then on to #2″
Any help or suggestions would be appriciated

Best Regards
Kristoffer

Kashif Munir

July 25, 2012

Really nice Plugin. i am going to use this. need to know some thing id this plugin supported with ipad and iPhone???

Casey – ajaxBlender

July 2, 2012

Hello Abhilash,

Any scripts on our site which are listed as created by ajaxBlender are free and available under GPL3:
http://www.gnu.org/copyleft/gpl.html

I hope that answers your question, but please let us know if you need any further clarification.

Thank you,

Casey

Casey – ajaxBlender

June 30, 2012

Hello Jeremy,

Unfortunately we were unable to recreate the issue you are describing, but it sounds like a z-index issue. Would it be possible for you to provide a link to the site where you have installed the script? We can take a look at it and see if there is a simple solution. Please post the link here or email us at support@htmlblender.com

Thank you,

Casey

Abhilash Raj R.S

June 30, 2012

Is this script free to use in commercial projects or not?

Jeremy Carlson

June 27, 2012

I’m using a custom div for the stretcher, rather than the body tag. So my content is within .bgstrecher-page. My content looks like it is on top of the slider, but nothing is clickable anymore. Almost like a clear div is on top of my content. What do I need to do to change that.

Casey – ajaxBlender

June 26, 2012

Hello Nicola,

Unfortunately the functionality you are describing is not a part of the bgStretcher II script. If you would like this functionality, please contact us at support@ajaxblender.com and we can arrange a project to add this functionality for you.

Thank you,

Casey

Nicola Elvin

June 25, 2012

Hi, is it possible to choose an image to go to once the slide show has started? I want the user to click one of 4 boxes that correspond with one of 4 background Images. When they click that element, I want the background stretcher to use the image I associate with that.

Casey – ajaxBlender

June 23, 2012

Hello Juergen,

Unfortunately the functionality you are describing is not a part of the bgStretcher II script. If you would like this functionality, please contact us at support@ajaxblender.com and we can arrange a project to add this functionality for you.

Thank you,

Casey

Casey – ajaxBlender

June 22, 2012

Hello Scott,

When set to random, the script will randomly select a starting image, therefore setting startElementIndex will have no effect. If you would like this functionality, please contact us at support@ajaxblender.com and we can arrange a project to add this functionality for you.

Thank you,

Casey

Juergen

June 22, 2012

Hi, i would also like to know, if it is possible to add thumbnails or coins, which show the user, which picture he is watching right now.

Scott

June 21, 2012

Could you make the startElementIndex controlling even in random mode? I mean so you always start with the index you pick like 0 and then start randomly from there?

Otherwise, great script!

Leave a comment

Your name

October 2, 2014

Spam protection. Enter result of expression you see in the box below.

2 + 7 =