Working with interactive-background.js

I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.

Here's my code:
HTML -

<body>
  <div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
  </div>
</body>

CSS -

html {
  height: 100%;
}
body {
  padding: 0;
  text-align: center;
  font-family: 'open sans';
  position: relative;
  margin: 0;
  height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
  height: auto !important;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.bg {
  position: absolute;
  min-height: 100% !important;
  width: 100%;
  z-index: 0;
}

.ibg-bg {
  position: absolute;
}

Js -

$(document).ready(function(){
   $(".bg").interactive_bg({
     strength: 20,
     scale: 1.00,
     contain: false,
     wrapContent: true
   });
});

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

I reverse engineered the tutorial files to find this code.

Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.

How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?

I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.

Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work. (I did link the CSS to the HTML correctly)

P.S refer to the tutorial I linked above, it'll get you an idea.

UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image. HTML-

<body>
  <div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
  </div>
  <div class="main"> <h1> SOME TEXT </h1></div>
</body>

CSS -

#main{
position: relative;
}