text not showing up over background image – Photoshop

I am making a landing page, and this might sound like a stupid question, but my <h2> and <form> elements are not showing up anywhere on my page. I have tried everything I can think of and still, nothing. I’m baffled.

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.

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.

index.html

 <section id="bg">
        <img src="img/bg.jpg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" id="rotating-img-wrapper">
                    <img class="rotating-img" src="img/corona.png">
                    <img class="rotating-img" src="img/mc.png">
                    <img class="rotating-img" src="img/mtv.png">
                    <img class="rotating-img" src="img/op.png">
                    <img class="rotating-img" src="img/supercell.png">
                </div>
            </div> 
            <div class="text">
              <h2>To learn more about our services, drop us a line</h2>
               <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Email Address</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
              </div>       
            </div>            
    </section> 

css

#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;
}

javascript

$(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();
});

If anyone can see an error(s) in my code that I cannot see, I would love to know. Thanks for the help.