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;

}

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>