Issue with backstretch code (DIV background)

Question

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;

}

Answer 1

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>
   

Answer 2

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.