Adding text above an image

Question

I want to add text over an image using css. I am using bootstrap. I have not to use background image.

 <div id="myCarousal" class="carousal slide">
            <div class="carousal-inner"> 
            <div class="item active"> 
              <img src="img/cr1.jpg">
                <div class="container active">
                  <div class="carousal-caption"> 
                  <h1>  Quiz </h1>
                  <p> Want to be part of it..</p>

                  <p> <a href="#" class="btn btn-primary btn-large">Sign Up Today</a></p>

                  </div>
                </div>
            </div>
            </div>
          </div>

The CSS is as follows..

.carousel-caption{
    z-index:10;
    position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}
.carousel-inner > .item > img{
    position: relative;
    top: 50px;
    /*left: 0;*/
    min-width: 100%;
    height: auto;
}
.carousel-inner > .item{
    height: 500px;   
}

Please help me to fix it.

Also take a look at: http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css — Hashem Qolami, Sep 08 '14 at 17:58
@HashemQolami I need to add at the bottom..and I went through both the sites.. — jahan, Sep 08 '14 at 17:59
Here is an answer I wrote few months ago: http://stackoverflow.com/questions/21582774/add-text-overlay-to-panel-and-image-with-zurb-foundation/21584335#21584335 you might find it helpful. — Hashem Qolami, Sep 08 '14 at 18:07
I think this is the result of writing mistake :) carousel &Carousal — jahan, Sep 08 '14 at 18:33

score 0 · Answer 1 · answered Sep 08 '14 at 18:30

Try adding z-indexes for each element. Just in case, we're adding a z-index for everything inside .carousel-caption just to avoid any chance you have some z-index somewhere

.carousel-inner .item img{
    position: relative;
    top: 50px;
    /*left: 0;*/
    min-width: 100%;
    height: auto;
    z-index:0;
}
.carousel-caption{
    z-index:1;
    position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}
.carousel-caption *{
    z-index:1000;
    position: relative;
}

Adding text above an image

1 Answers1