Jquery backstretch inside div?

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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