Skip to content

Backstretch can now be applied to multiple DIVs #93

Closed
wants to merge 2 commits into from
@timnovinger

This adds the ability to apply the backstretch to multiple DIV containers, instead of only the Body of a page, along with additional CSS options to go with it.

timnovinger added some commits Feb 29, 2012
@timnovinger timnovinger Backstretch can now be applied to multiple DIVs
This commit includes additional options and the ability to apply
the backstretch to multiple DIV containers, instead of only the
BODY of a page.
ce988ef
@timnovinger timnovinger Updated minified version ebe0652
@srobbin
Owner
srobbin commented Mar 4, 2012

This is awesome! Thanks, Tim.

I'm going to be adding in a couple more features for the next release, so it might be a week or so before I pull in the changes. Still, I really appreciate this pull. Thanks so much.

@timnovinger

Here is an example of some of the new usage:

$.backstretch(IMAGE_SRC, {
'target': DIV_ID,
'speed': TIME_IN_MS_OR_JQUERY_KEYWORD,
'positionType': 'absolute',
'zIndex': 0
});

@kvcrawford

Love the plugin, thanks for sharing your work guys. It'd be really awesome if this pull request was added!

@paulmolluzzo

This is an awesome update to the plugin! Used this source over the original...

@Greg0497

Hi,
I'm interested in having a full screen pic for each #div (each page on my single page website
Unfortunately I'm not sure how to use the code above.
Should I copy it 3x in my html page (one per #div)
What do I need to put for speed?
And for DIV_ID to I need to put brackets or something?
Many thanks,

@timnovinger

@Greg0497

  • Yes, you would need to declare the backstretch per each div you want to apply it to.
  • No sure? I suppose you could cache the container of the div to a variable and then use .find() to search within it, although if the container is $('body') then this is pretty pointless.

    var $container = $('#page-wrapper') and then $container.find('#my-div')

  • Simply use a string of the ID for DIV_ID, such as 'target': '#my-div'

@Greg0497

thanks Tim!

@johntuesday

Hey,
Really cool, I've been searching for this ;)
But it doesn't work for me ;)
Here's what i'm creating
http://the-weeknd.com/

I have a single page in 3 Main Div (page1 - page3)
The first BG fits perfectly, but if I target the same (or another) Image to set on my "page2" Div, nothing happends =(

is this right?

Hope you can help me ;)

@Sebah
Sebah commented Jul 30, 2012

Hi,

I'm wondering about the same thing as 'johntuesday.
Basically I have a single page website with vertical scroll, each div fiting the screen size ( I'm doing this via jQuery, on document.load ). The problem I'm having is that the it's only applying backstretch to the last div from the script:

$.backstretch('img/bg/home.jpg', {
'target': '#home',
'speed': '1',
'positionType': 'absolute',
'zIndex': -2
});
$.backstretch('img/bg/agepage.jpg', {
'target': '#agePage',
'speed': '1',
'positionType': 'absolute',
'zIndex': -1
});

and the width that is setting is longer than the container...

@paulmolluzzo

I'm pretty sure that the issue everyone is experiencing has to do with the positionType which has a default setting of fixed. Since a few people are having issues with applying backstretch multiple times, I'll paste in my code so you can see how I did it. This is working just fine for me in vertically stacked divs.

This is in the HTML above </body>.

            $.backstretch('images/image1.jpg', {
            'target': '#one',
            'speed': 1000,
            'positionType': 'relative',
            });

            $.backstretch('images/image2.jpg', {
            'target': '#two',
            'speed': 1000,
            'positionType': 'relative',
            });

            $.backstretch('images/image3.jpg', {
            'target': '#three',
            'speed': 1000,
            'positionType': 'relative',
            }); 

Also, a tip/issue when using backstretch on vertical divs is in regards to responsive design. I adjusted the heights of the divs at specific breaks so that it flowed nicer. I suppose you could include some JS that resizes the height dynamically, but that's another story...

Here's an example with an (abridged) media query I'm using:

.section {
    width: auto;
    height: 825px;
    margin: 0px auto -20px auto;
    overflow: hidden;
}
.
.
.
@media screen and (max-width:500px) {
    .section {
    height: 540px;
    }
}
@Sebah
Sebah commented Jul 31, 2012

@paulmolluzzo - thanks for your reply mate.
I've played with the script's settings and still didn't get the result I was expecting.

Basically I have my 3 DIV's aligned vertically on the page ( I'm setting the width & height via css, not JS ) and the backstretch images are being rendered, but only the last one in the chain goes 100% width & height, the other 2 ( so the first 2 ) only showing the image at its original dimensions.

Did you run into the same issue?

@kohloth
kohloth commented Jul 31, 2012

Hmm...this is frustrating. I can get it to work in the usual way;

$.backstretch("pot-holder.jpg");

and the div way when using HTML element tags;

$.backstretch("<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/images/text-bg.jpg", {
'target': 'html';
});

and

$.backstretch("<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/images/text-bg.jpg", {
'target': 'head';
});

$.backstretch("<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/images/text-bg.jpg", {
'target': '*';
});

Which all append the div appropriately. However, the following:

$.backstretch("<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/images/text-bg.jpg", {
'target': ''#myDiv'
});

Doesn't do anything at all. Theres no prepended divs there in the source code at all. Have tried with and without the "#" before the div name, different divs, and even div.myDiv etc...

@gamecat2300

Wow Man! I'm kind of in love with you... Thanks a million!

@tscok
tscok commented Aug 16, 2012

I'm having the same problem as @Sebah

I have a vertical, two DIV layout. Both DIV's have the following CSS:
width: 100%;height: 320px;overflow: hidden;

The two DIV ID's are "#img1" and "#img2"

The code I run is what @paulmolluzzo posted above:

$.backstretch('folder/img1.jpg', {
  'target': '#img1',
  'speed': 1000,
  'positionType': 'relative',
});

$.backstretch('folder/img2.jpg', {
  'target': '#img2',
  'speed': 1000,
  'positionType': 'relative',
});

While img2.jpg gets stretched, img1 remains unstretched. It doesn't matter if I change the order in the script, it's always the last one that gets affected by the stretch.

I've tested this in both FF 14 and IE 8 - same problem. The code I have taken from GitHub so it should be the latest version I guess. The jQuery library I'm using is http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js if that would matter?

It's really frustrating since I love what it does.. or would do if it worked =)

@srobbin
Owner
srobbin commented Sep 5, 2012

Hi Everyone,

I've got a new version of Backstretch in progress that adds this functionality, and makes it easier to do slideshows. Would you mind taking a look, giving it a spin, and letting me know if you have any troubles or thoughts?

Thank you, again, to @timnovinger for submitting his excellent patch, and for inspiring this thread. I chose to refactor much of the plugin, so his changes couldn't be merged, though they were very helpful in guiding the implementation.

https://github.com/srobbin/jquery-backstretch/tree/2.0.0-wip

@srobbin srobbin closed this Nov 26, 2012
@christopherkoelsch

Hi having a problem with no images loading for the past 5 days of trying with backstretch. Checked all my file paths, have proper library plugins, checking order of markup, checked order of scripts. Any ideas? please help!

Here is my code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="new_website/new_site_css/stylesheet2.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">


I don't have any css declared, FYI. Thanks so much!

@eladnova
eladnova commented Nov 6, 2013

@ christopherkoelsch

Have a live URL we can look at?

@christopherkoelsch
@kvcrawford

@christopherkoelsch change the following lines:

<link rel="stylesheet" href="new_website/new_site_css/stylesheet2.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<script type="text/javascript" src="new_website/jquery.backstretch.js"></script>

to

<link rel="stylesheet" href="./new_site_css/stylesheet2.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<script type="text/javascript" src="./jquery.backstretch.js"></script>

or prefix the "new_website" part with a "/" to make it an absolute URL: "/new_website/jquery.backstretch.js"

@christopherkoelsch
@eladnova
eladnova commented Nov 7, 2013

Chris - I can't see where you are telling backstretch which block level element you want the image applied to?

Then again, I normally apply it to a DIV so that might not be the issue.

Why dont you try applying it to a DIV for the moment and we might be able to narrow it down?

@eladnova
eladnova commented Nov 7, 2013

Chris - I downloaded your page and files and got it working on your body tag.
Have a look for multiple opening html tags in your code. When I 'view source', I see two tags.

Next up is your paths issue. If you want, I can forward you a zipped up folder of my working demo.

@christopherkoelsch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.