For my website, I am utilizing a fullscreen background with the help of backstretch. The code below works perfectly on one of my websites:
<script>
$.backstretch([
"images/1.jpg"
, "images/2.jpg"
, "images/3.jpg"
], {duration: 6000, fade: 750});
</script>
However, on my new website which has a one page layout with multiple divs, the above code does not work. I have tried a different approach where I want separate full screen backgrounds for each DIV:
<script>
$("#presentation").backstretch("../images/bg-24.jpg");
$("#presentation2").backstretch("../images/bg-25.jpg");
$("#presentation3").backstretch("../images/bg-26.jpg");
</script>
Then, I include the following code for each DIV:
<div id="presentation">
blablabla
</div>
Corresponding CSS Code:
#presentation {
height: 1300px;
}
#presentation2 {
height: 1300px;
}
#presentation3 {
height: 1300px;
}