title: text not showing up over background image
body: <p>I am making a landing page, and this might sound like a stupid question, but my <code>&lt;h2&gt;</code> and <code>&lt;form&gt;</code> elements are not showing up anywhere on my page. I have tried everything I can think of and still, nothing. I'm baffled. </p>
  
  <p>The photo I am using for my full screen background image is one off of photoshop with a grey square in the center (which looks like what some people do with z-index). In the background, it is cycling logo's in js as a kind of throwback design. </p>
  
  <p>I am not sure if I am doing something wrong, or if there is something in my css, html, js making it so the text/form is not showing up.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code> &lt;section id="bg"&gt;
          &lt;img src="img/bg.jpg"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12" id="rotating-img-wrapper"&gt;
                      &lt;img class="rotating-img" src="img/corona.png"&gt;
                      &lt;img class="rotating-img" src="img/mc.png"&gt;
                      &lt;img class="rotating-img" src="img/mtv.png"&gt;
                      &lt;img class="rotating-img" src="img/op.png"&gt;
                      &lt;img class="rotating-img" src="img/supercell.png"&gt;
                  &lt;/div&gt;
              &lt;/div&gt; 
              &lt;div class="text"&gt;
                &lt;h2&gt;To learn more about our services, drop us a line&lt;/h2&gt;
                 &lt;div class="form-group"&gt;
                  &lt;label for="inputPassword3" class="col-sm-2 control-label"&gt;Email Address&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                    &lt;input type="password" class="form-control" id="inputPassword3" placeholder="Password"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;       
              &lt;/div&gt;            
      &lt;/section&gt; 
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>#bg {
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
  }
  #bg img {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
  }
  
  #rotating-img-wrapper img {
    position: fixed;
    width: 250px;
    height: 750px;
  }
  
  .rotating-img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  h2 {
    color: #000000;
    position: absolute;
  }
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>$(window).load(function() { 
      var InfiniteRotator =
      {
          init: function()
          {
              //initial fade-in time (in milliseconds)
              var initialFadeIn = 1000;
  
              //interval between items (in milliseconds)
              var itemInterval = 5000;
  
              //cross-fades time (in milliseconds)
              var fadeTime = 2500;
  
              //number of items
              var numberOfItems = $('.rotating-img').length;
  
              //current item
              var currentItem = 0;
  
              //show first item
              $('.rotating-img').eq(currentItem).fadeIn(initialFadeIn);
  
              //loop through the items
              var infiniteLoop = setInterval(function(){
                  $('.rotating-img').eq(currentItem).fadeOut(fadeTime);
  
                  if(currentItem == numberOfItems -1){
                      currentItem = 0;
                  }else{
                      currentItem++;
                  }
                  $('.rotating-img').eq(currentItem).fadeIn(fadeTime);
  
              }, itemInterval);
          }
      };
      InfiniteRotator.init();
  });
  </code></pre>
  
  <p>If anyone can see an error(s) in my code that I cannot see, I would love to know. Thanks for the help. </p>