I am trying to achive a fullscreen background image inside a div using JQuery.

I am using the Backstretch plugin, which works fine however it binds the image to the body tag.

I am looking to apply this to a div with the id of home_middle_bg, any ideas?

Thanks

I am trying to achive a fullscreen background image inside a div using JQuery.

I am using the Backstretch plugin, which works fine however it binds the image to the body tag.

I am looking to apply this to a div with the id of home_middle_bg, any ideas?

Thanks

• javascript
• jquery
• background

Share Improve this question Follow asked Jul 18, 2011 at 15:57 shovelnoseshovelnose 2311 silver badge33 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I added a new settings option that defaults to body if undefined. So the suggestion from above would look like so:

 if($(settings.targetObject + ' #backstretch').length == 0) {
      $(settings.targetObject).append(container);
 }

Actually the image is binded to a div and that is prepended to the body: you could modify it by hand by replacing (line 69 of the plugin):

            if($("body #backstretch").length == 0) {
                $("body").prepend(container);
            }

with

            if($("#home_middle_bg #backstretch").length == 0) {
                $("body").prepend(container);
            }

If you still want to use that plugin, you'd need to modify it around here (replace "body" with what you want) : https://github./srobbin/jquery-backstretch/blob/fcb8ee843b4d88a5081668ec615afd6a57da8242/jquery.backstretch.js#L72

For me the jumping cause in the jquery.backstretch.js plugin was solved by updating the plugin code:

Instead of (default)

t.backstretch=function(i,e){return t("body").backstretch(i,e).data("backstretch")}

for me it worked when referring backstretch to a different container:

t.backstretch=function(i,e){return t("#header").backstretch(i,e).data("backstretch")}....

Regards, ventilator5000