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

Description

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

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
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!

TIP:
You can check some hosts that won’t give any problems related to browser compatibility and to script languages.

Casey – ajaxBlender

November 2, 2012

TY3,

From looking at the url, if you do not need it to stretch to fit the screen’s height/width exactly, you shouldn’t use bgStretcher. Just set the image to 100% width with the height set to auto. The image would need to be in a layer beneath the content. This way the image will stretch to 100% of the screen, but the bottom wouldn’t be cut off.

I hope this makes sense?

But, if you are using the slide show features of background stretcher, then that might require a different answer. Clarify this, and I’ll be glad to look again. From another review, it almost seems like you may have already fixed the issue. I don’t see any truncated content. Post a reply or email us at support@ajaxblender.com.

Thanks,

Casey

TY3

October 30, 2012

I have used your JS on mp.df-kunde.de/_testsystem/. Thanks a lot for it! On subpages the content is cut or truncated, because the DIV-class bgstretcher-area seems to be fixed. What can be done for a flexible height? Greetings from Germany!

Josh

July 18, 2012

Just a heads up… The latest version of Java combined with bgstretcher causes your browser to freeze. I had to roll back to the deprecated version to get it to work with Java.

Eder Eduardo

July 5, 2012

Hello, I think that you do not need to use the element $(document) to call the function. I believe that you can use $(’body’) and it will perform better!

CH

June 21, 2012

Hello,
Can we put links url on the slide, please ?
Thank your for your help ;))

Jay

June 15, 2012

Hey guys, this plugin does not work for div rather then body. Because in one of my project i need to show some slideshows with auto resize feature of images. If anyone know this, please help me soon..

culona

May 24, 2012

Is there anyway to use .swf instead of .jpg? i.e, if you want an animating background?

chandelier

May 13, 2012

Is there anyway to use .swf instead of .jpg? if i want an animated background?

baz

April 2, 2012

is there anyway to use .swf instead of .jpg? i.e, if you want an animating background?

Phil

March 27, 2012

what property would you adjust so you only want it to stretch the height to a specific width?

Darren – ajaxBlender

March 23, 2012

John Sherry,

From looking at the URL you posted, I see it is working fine in IE. Maybe the issue is in IE6? If so, it is probably just related to – position:fixed. Give it a try, and let us know. Feel free to email us too.

Thanks,

Darren

john sherry

March 22, 2012

Hi there, desperately need your help.
I installed everything following your instructions and it works fine in Firefox but as you can see doesnt work in any version of i.e. Can you help me please?

the site is thepinoystore.com

Many thanks. John

Djelda

March 21, 2012

Hello,
Can we put links url on the slide, please ?
Thank your for your help ;))

irfan arif

March 10, 2012

This is my very first website I have not developed any website before.

I developed it using bgstretcher but having some problems on Opening of this website background images slides without downloading full images. I want to make it first download background images, then display the page…

Please help me out..
thanks

Watt Communication

March 9, 2012

Simple and very nice script ! Thanks !

Kodokuna

February 25, 2012

Hi im new and have a question that is a little stupid XD … i saw that the pictures in any page are loaded name by name. is there a way to load a file from where the js get all the photos inside? thanks

laan

February 16, 2012

Can this jQuery plug-in also be used for normal blogs made with blogger, or only wordpress?

Puneet J.

January 10, 2012

Is there any example with transition between images like fade in ?

Many thanks

Puneet J.

peter henderson

November 11, 2011

Hi, great work! Can I use this code in a template to sell on a template website? Ie for commercial use? Thanks

Jeanné

November 8, 2011

Thanks so much! Exactly what I was looking for! Works perfectly on Mac and Windows.

Anna

October 22, 2011

Hi I try to make background center with fixed size. Is it possibile? Is anyone can help me with soloution?

Darren – ajaxBlender

September 28, 2011

Jose,

Our license is simple. Use or modify bgstretcher (or bgstretcher 2) however you like, but just make sure you give us credit in the code’s comments. Of course, a link would be appreciated too. :)

Darren

Jose

September 27, 2011

License?

Ryan

September 4, 2011

I have used this to create my website(www.callimorevilla.co.uk), thank you for this resource it looks fantastic!

I have made a small change to the code to stop the problem where the screen goes blank when you click on an album and you are already on the first picture of that album.

function switchImage(newImage, oldImage) {

oldImage.removeClass(’bgs-current’);
newImage.addClass(’bgs-current’);

oldImage.fadeOut( $.fn.bgStretcher.settings.slideShowSpeed );
newImage.fadeIn( $.fn.bgStretcher.settings.slideShowSpeed );
}
just make sure you fade out before you fade in!

yorgos

September 1, 2011

Hello,
I copied the code between the tags head,i did everything you suggest but it doesn’t display the background image at all..I also changed the SlideShow from true to false but it still doesn’t work..this is my code

Untitled Document

$(document).ready(function(){
// Initialize Backgound Stretcher

$(document).bgStretcher({
images: ['images/background.jpg'], imageWidth: 1024, imageHeight: 768
});
});

#page {
z-index: 2;
position: relative;
}

mark

July 28, 2011

I am currently developing a site that uses the bgstretcher tool and it doesn’t seem to work properly on the iphone, it seems to cut the image off. does anyone know away around this? (do i need to i put a piece of specific code in the css for iphone safari)

can anyone please help???

EsCie

June 27, 2011

Hi guys. Care to help me out? How do I get the bgstretcher to work if I want multiple div elements to have different backgrounds, each resized by the plugin. Simple initializing the different divs doesn’t seem to work… only the first div is working.

thanks in advance

Michael

June 17, 2011

Hi – great plugin and works very well except for Internet Explorer where the script really slows down the page a lot – causing slow scrolling and poor performance. Does anyone have any tips on how to speed this up. The site I am working on is robertson-rural.co.uk

Jacob Bundgaard

June 11, 2011

Hello ajaxBlender.com

Any chance of having my randomization patch implemented in the next release? I’m sure it would help a lot of people, seeing as they won’t need to rename all their pictures in a linear fashion:

$.fn.bgStretcher.randomize = function(animate, notCurrent){
var allLIs = $(containerStr + ‘ UL LI’);
do {
var next = allLIs.eq(Math.floor(Math.random() * allLIs.size()));
} while (notCurrent && next.is(’.bgs-current’))

if(animate && !next.is(’.bgs-current’)) {
current.removeClass(’bgs-current’).fadeOut( $.fn.bgStretcher.settings.slideShowSpeed );
next.addClass(’bgs-current’).fadeIn( $.fn.bgStretcher.settings.slideShowSpeed );
} else {
current.removeClass(’bgs-current’).hide();
next.addClass(’bgs-current’).show();
}
}

Cedric

May 13, 2011

Hello,
Great script !
I have a problem with the div tag with the parameter “height: 100%”
This. js disrupts tags “HTML ” or “BODY” the parameter “height”.
Have you ever had this problem?

Many thanks,
Cedric

Jeff Foster

May 4, 2011

Well done! I have been looking for a background image resizing script but sadly don’t have the experience with js to do it myself. You’ve helped me out a lot and I expect I’ll be using this script quite a bit in the future.

ajaxBlender.com

May 2, 2011

Hello Custom tents!
Thank you for your suggesstion. We will consider creating such a plugin.

Slot

April 30, 2011

I’m still trying to work with that imagecontainer it doesn’t work the way I want it to work.

Badger

April 29, 2011

Hey I love this script but wonder if there is a way to make the images appear in a random order rather than the order that they are put in?

Many thanks for any help you can offer.

Brad Shaw

April 25, 2011

There was talk about a new version of this script in January. Any idea when it might be ready?

Greg

April 22, 2011

Hi Guys

Great script. Is it possible to specify a value for “Opacity”? This is so I can change the opacity of the background image so that it does not overpower my menu that is located in the middle of the screen.
Thanks
Regards
Greg

lalit

April 22, 2011

var totalCount = 4;
$(document).ready(function(){
// Initialize Backgound Stretcher
var num = Math.ceil( Math.random() * totalCount );
$(document).bgStretcher({
images: ['images/sample-'+num+'.jpg'],
imageWidth: 1024, imageHeight: 768
});

});

ajaxBlender.com

April 22, 2011

Dave W,
At first you should fix all W3C errors. You may use W3C validator to detect them. This should fix issue with script (you have issue with BODY tag). If this won’t help (but most likely this will fix the issue), please contact us for additional help.

Leave a comment

Your name

September 2, 2014

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

3 + 7 =