Backstretch can now be applied to multiple DIVs #93

timnovinger · 2012-03-01T16:33:33Z

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.

This commit includes additional options and the ability to apply the backstretch to multiple DIV containers, instead of only the BODY of a page.

srobbin · 2012-03-04T04:22:03Z

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 · 2012-05-15T15:53:48Z

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 });

kcrwfrd · 2012-07-08T00:28:52Z

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

paulmolluzzo · 2012-07-11T03:54:36Z

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

Greg0497 · 2012-07-18T20:24:08Z

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 · 2012-07-20T06:33:06Z

@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 · 2012-07-22T21:09:24Z

thanks Tim!

johntuesday · 2012-07-27T12:38:48Z

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 · 2012-07-30T17:08:06Z

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 · 2012-07-30T18:44:16Z

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 · 2012-07-31T09:45:44Z

@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 · 2012-07-31T22:20:12Z

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("baseurl ;?>/templates/template ;?>/images/text-bg.jpg", {
'target': 'html';
});

and

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

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

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

$.backstretch("baseurl ;?>/templates/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 · 2012-08-10T21:21:32Z

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

tscok · 2012-08-16T11:12:04Z

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 · 2012-09-05T18:19:50Z

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

christopherkoelsch · 2013-11-06T17:44:10Z

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:

<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 · 2013-11-06T18:40:13Z

@ christopherkoelsch
Have a live URL we can look at?

christopherkoelsch · 2013-11-06T20:15:00Z

Yes -- thanks so much for replying. Nothing appears but here is the link:

http://christopherkoelsch.com/new_website/test.html

Huge thanks again.

On Wed, Nov 6, 2013 at 1:40 PM, eladnova notifications@github.com wrote:

@ christopherkoelsch

Have a live URL we can look at?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/93#issuecomment-27900846
.

kcrwfrd · 2013-11-06T21:56:28Z

@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 · 2013-11-06T22:29:45Z

Hey Kevin:

Thanks so much for answering my question!

Changed to the above code -- and it still doesn't work for some reason.
All images are in their correct folders, have latest version of
jquery....emptied cache in browser...still troubleshooting.

Any more ideas?

Many thanks

Chris

On Wed, Nov 6, 2013 at 4:56 PM, Kevin Crawford notifications@github.comwrote:

@christopherkoelsch https://github.com/christopherkoelsch change the
following lines:
<script type="text/javascript" src="new_website/jquery.backstretch.js"></script>
to
<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"

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/93#issuecomment-27917617
.

eladnova · 2013-11-07T11:03:15Z

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 · 2013-11-07T11:23:52Z

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 · 2013-11-07T13:20:36Z

The zip would be great. So appreciated! Many thanks. I'll check out the
multiple tags.

C.

On Thu, Nov 7, 2013 at 6:24 AM, eladnova notifications@github.com wrote:

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.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/93#issuecomment-27955147
.

timnovinger added 2 commits February 29, 2012 18:07

Backstretch can now be applied to multiple DIVs

ce988ef

This commit includes additional options and the ability to apply the backstretch to multiple DIV containers, instead of only the BODY of a page.

Updated minified version

ebe0652

srobbin closed this Nov 26, 2012

Pixelsmith mentioned this pull request Jul 11, 2013

Background-Attachment: Fixed on block-level elements #259

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Backstretch can now be applied to multiple DIVs #93

Backstretch can now be applied to multiple DIVs #93

timnovinger commented Mar 1, 2012

srobbin commented Mar 4, 2012

timnovinger commented May 15, 2012

kcrwfrd commented Jul 8, 2012

paulmolluzzo commented Jul 11, 2012

Greg0497 commented Jul 18, 2012

timnovinger commented Jul 20, 2012

Greg0497 commented Jul 22, 2012

johntuesday commented Jul 27, 2012

Sebah commented Jul 30, 2012

paulmolluzzo commented Jul 30, 2012

Sebah commented Jul 31, 2012

kohloth commented Jul 31, 2012

gamecat2300 commented Aug 10, 2012

tscok commented Aug 16, 2012

srobbin commented Sep 5, 2012

christopherkoelsch commented Nov 6, 2013

eladnova commented Nov 6, 2013

christopherkoelsch commented Nov 6, 2013

kcrwfrd commented Nov 6, 2013

christopherkoelsch commented Nov 6, 2013

eladnova commented Nov 7, 2013

eladnova commented Nov 7, 2013

christopherkoelsch commented Nov 7, 2013

Backstretch can now be applied to multiple DIVs #93

Backstretch can now be applied to multiple DIVs #93

Conversation

timnovinger commented Mar 1, 2012

srobbin commented Mar 4, 2012

timnovinger commented May 15, 2012

kcrwfrd commented Jul 8, 2012

paulmolluzzo commented Jul 11, 2012

Greg0497 commented Jul 18, 2012

timnovinger commented Jul 20, 2012

Greg0497 commented Jul 22, 2012

johntuesday commented Jul 27, 2012

Sebah commented Jul 30, 2012

paulmolluzzo commented Jul 30, 2012

Sebah commented Jul 31, 2012

kohloth commented Jul 31, 2012

gamecat2300 commented Aug 10, 2012

tscok commented Aug 16, 2012

srobbin commented Sep 5, 2012

christopherkoelsch commented Nov 6, 2013

eladnova commented Nov 6, 2013

christopherkoelsch commented Nov 6, 2013

kcrwfrd commented Nov 6, 2013

christopherkoelsch commented Nov 6, 2013

eladnova commented Nov 7, 2013

eladnova commented Nov 7, 2013

christopherkoelsch commented Nov 7, 2013