0

I'd like to use the Backstretch jQuery plugin to create a fullscreen background picture on the starting page. Therefore I used the following code:

<div class="startslide">
<script>
$.backstretch('IMG_3628.jpg');
</script>
</div>




<footer class="footer">>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script>

</footer>

I don't really know what I did wrong as I did it the same way it is described in the demo....

I'd very much appreciate your help :)

Adrian Varysoo
  • 75
  • 6
  • Do you use it JUST for body background image? Because, you can always use CSS for it: http://jsfiddle.net/z0bzogxv/ – sinisake Sep 07 '15 at 14:34

2 Answers2

0

You have to call jQuery plugin before calling those of Backtrech.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script>

Then, you have forget the []. Try that :

$.backstretch(['IMG_3628.jpg']);

Please find this JSFIDDLE

w3spi
  • 4,380
  • 9
  • 47
  • 80
0
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script>




<div class="startslide">
    <script>
        $.backstretch(['IMG_3628.jpg']);
    </script>
</div>
guvenckardas
  • 738
  • 4
  • 8
  • First mistake is all about javascript hierarchy. – guvenckardas Sep 07 '15 at 14:29
  • Cool it works now! Thanks a lot :) But why does everyone recommend to add script src's at the end of the page when you want to use it before? – Adrian Varysoo Sep 07 '15 at 14:41
  • everyone recommend to add script src's at the end of the page because of dom rendering issues. It is the best practise for rendering your html before js loaded. I just wanted to work your code clearly on the answer. Thanks – guvenckardas Sep 07 '15 at 15:29