文字未显示在背景图片上

Question

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.

Answer 1

I have some insight into how you might approach this layout.

I simplified your HTML slightly (removed the form and put in a simple line of text) so as to concentrate on the various stacking layers due to the fixed and absolutely positioned elements.

The key is that since your #bg element is fixed, it sets the reference point for positioning any other positioned child elements, be it fixed or absolute.

In your original post, you set the offsets to be top: -50% and left: -50% , which places the origin of the block outside of the visible viewing area.

As a result, h2 was positioned at the top left corner of #bg , hence not visible, and the p text, which is in regular content flow, would also start to the top left of the container block ( #bg ).

As a start, set the offsets to top: 0 and left: 0 with 100% for the width and height, and then rethink about how to size your images in your image rotator and the background image.

Now that you see where the elements are, you will make be able to make progress with your layout.

 body { margin: 0; /* get rid of 10px border from default browser style sheet */ } #bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } #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: auto; } .rotating-img { display: block; position: absolute; top: 0; left: 0; } h2 { color: #000000; position: absolute; top: 30%; left: 50%; } 

 <section id="bg"> <img src="http://placehold.it/500x500"> <div class="container"> <div class="row"> <div class="col-lg-12" id="rotating-img-wrapper"> <img class="rotating-img" src="http://placekitten.com/2000/4000"> </div> </div> <div class="text"> <h2>To learn more about our services, drop us a line</h2> <p>Some other words ...</p> </div> </section> 

Answer 2

You can use background-image: url(img/bg.jpg); in #bg, instead of adding the image directly and try to add something on it.

Answer 3

In your image CSS, do this in the CSS:

z-index:-1000;

The z-index controls what elements overlap other elements. The higher the z-index, the more in front an element will be. See if that clears anything up. Otherwise, there is another issue. I am also curious as to why you are using absolute positioning on all those elements.

Answer 4

In CSS try this code:

#bg {
    background-image:url('img/bg.jpg');
}

And then remove the tag from the HTML page. I would also take a look at simplifying your code since you seem to have a ton of divs all wrapped within each other. Perhaps consider using a table if it suits your needs.