I'm trying to create a single page website that scrolls vertically. My design is image based and it needs to be mobile responsive for my grade.
The issue I'm having is with the background images. I can get backstretch to work with just the body, however i need it to work in different divs and not just display one image over the entire height of the container.
I'm not that experienced with jquery. Which is definitely my main issue here :(
Any suggestions would be greatly appreciated. Here's what I have so far.
<div id="container">
<div id="one">
<script>
$("#one").backstretch("img/banner1.jpg")
</script>
</div>
<div id="two">
</div>
<div id="three">
<script>
$("#three").backstretch("img/banner2.jpg")
</script>
</div>
That applies the image to the divs, however it no longer scales the image at all, instead of centering on the y-axis it just hides a portion of the image.