CODEWITHSUNDEEP
javascriptjquerybackground
shovelnose
shovelnose

Reputation: 23

Jquery backstretch inside div?

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

Upvotes: 2

Views: 6948

Answers (4)

Ventilator5000
Ventilator5000

Reputation: 1

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

Upvotes: 0

cpassmore
cpassmore

Reputation: 21

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

Upvotes: 2

Shikiryu
Shikiryu

Reputation: 10219

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

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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

Upvotes: 1

Related Questions