Jquery backstretch inside div?

Question

1.20M viewsSeptember 16, 2022background javascript jquery

2

shovelnose September 12, 2022 0 Comments

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

score 0 · Answer 1 · 2022-09-13T10:18:44+00:00

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

score 2 · Answer 2 · 2022-09-13T07:43:45+00:00

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

score 0 · Answer 3 · 2022-09-13T03:26:15+00:00

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

score 1 · Answer 4 · 2022-09-13T02:49:14+00:00

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