CODEWITHSUNDEEP
jqueryhtmlcssjquery-backstretch
Greg
Greg

Reputation: 3063

Issue with backstretch code (DIV background)

I'm using backstretch for fullscreen background. On one of my website it works perfectly fine with this code just after the opening body tag:

<script>
$.backstretch([
      "images/1.jpg"
    , "images/2.jpg"
    , "images/3.jpg"
  ], {duration: 6000, fade: 750});

</script>

However on my new website (one page layout with several divs) that does not work. I tried the code below as suggested on backstretch website - I'd like a different full screen background per DIV:

<script>
 $("#presentation").backstretch("../images/bg-24.jpg");
 $("#presentation2").backstretch("../images/bg-25.jpg");
 $("#presentation3").backstretch("../images/bg-26.jpg");
</script>

then

<div id="presentation">
blablabla
</div>
blablabla blablabla

CSS Code:

#presentation {
    height: 1300px;

}

#presentation2 {
    height: 1300px;

}

#presentation3 {
    height: 1300px;

}

Upvotes: 0

Views: 2519

Answers (2)

Uday Hiwarale
Uday Hiwarale

Reputation: 233

Find this code inside jquery.backstretch.min.js
return a("body").backstretch(c,b).data("backstretch")

and change "body" to ".backstretch"

Now, give .backstretch class to your div

Done.

Upvotes: 2

Nagarjun
Nagarjun

Reputation: 2466

There are two ways.

  1. Move script below the div tag

  2. change it to following

    <script>
 jQuery(document).ready(function($){
   $.backstretch([
      "images/1.jpg"
    , "images/2.jpg"
     , "images/3.jpg"
   ], {duration: 6000, fade: 750});
});
</script>

Upvotes: 0

Related Questions