Placing text on top of a image

Question

I've been looking on several threads on stackoverflow, but cant seem to make it work. What i've found out is that i need to apply relative position on the parent div and then absolute on the child text, but this is not working? what am i doing wrong`

 .the-image { position: relative; border: 1px solid; width: auto; } .the-h3 { z-index:100; position:absolute; color:white; font-size:24px; font-weight:bold; left:150px; top:350px; } .the-h3 span { color: #ffffff; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; } 

 <div class="the-image"> <img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img> <h3 class="the-h3"><span>TEST</span></h3> </div> 

Answer 1

You are giving the h3 a top property which is more than the image is high.

Simply lower that value to something more fitting:

 .the-image { position: relative; border: 1px solid; width: auto; } .the-h3 { z-index:100; position:absolute; color:white; font-size:24px; font-weight:bold; left:150px; top:10px; } .the-h3 span { color: #ffffff; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; } 

 <div class="the-image"> <img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img> <h3 class="the-h3"><span>TEST</span></h3> </div>