Page Background Cutting when resizing browser

Question

I don't know the best way to ask this question, I am having a problem with a website I am making for a school project that is about saving Skymall. Beside the point, I am having a problem with my page which is when I resize the browser window, it permanently re-sizes the height of the background. For example:

1. I open the website
2. Then I proceed to re-size the browser
3. Finally, I put the browser back to full screen, but the background image only covers the first part of the webpage and you can scroll down freely past it.

demo here: invisonal.com/demo

Some snippets of my CSS:

    .bg {
    position: absolute;
    height: 250%;
    width: 100%;
    z-index: 0;
}

.ibg-bg {
    position: absolute;
}

#main {
    vertical-align: middle;
    z-index: 1;
    position: relative;
}

What causes this? Also one final question how should I share my code to you guys. The CSS file and HTML are fairly large and I'm not sure where it is in the file. May I upload the code to dropbox or something?

Thanks guys :)

Answer 1

So i commented out resize part and background remains full size after resize

<script>
$(document).ready(function(){
   $(".bg").interactive_bg();
   $("#btns").interactive_bg({
     strength: 10,
     scale: 1.15,
     contain: false,
     wrapContent: true
   });
});

/*$(window).resize(function() {
  $(".wrapper > .ibg-bg").css({
    width: $(window).outerWidth(),
    height: $(window).outerHeight()
  })
})*/