文本没有显示在背景图像上

我正在制作一个登录页，这听起来可能是一个愚蠢的问题，但我的<h2>和<form>元素没有显示在我的页面上。我已经尝试了我能想到的一切，但仍然一无所获。我很困惑。

我在全屏背景图像中使用的照片是photoshop中的一张，中间有一个灰色的正方形（看起来就像有些人用z索引做的那样）。在背景中，它是一种复古设计的js骑行标志。

我不确定我是否做错了什么，或者我的css、html、js中是否有什么东西导致文本/表单不显示。

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

如果有人能在我的代码中看到我看不到的错误，我很想知道。谢谢你的帮助。