Background hidden when overlaying header with negative top margins

Question

I am trying to overlay a header onto an image. However the background is hidden under the image. Why is this happening?

http://jsfiddle.net/YRDFB/

<div class="header">
<img width="100%" height="200px"  src="/path/to/image.jpg" />
<h1>Header Title</h1></div>


h1 {
    background: rgba(67,67,67,0.8);
    margin-top: -3em;
}

Answer 1

We have 2 solutions here:

1. Using display:inline-block and set width:100% for your h1, also use negative margin-bottom on the img instead:

   h1 {
     background: rgba(67,67,67,0.8);    
     display:inline-block;
     width:100%;
   }
   img {
     margin-bottom:-4em;
   }
   

   Demo 1.

2. Using position:relative for the img and set z-index:-1 for it:

   h1 {
     background: rgba(67,67,67,0.8);    
   }
   img {
     margin-bottom:-4em;
     position:relative;
     z-index:-1; 
   }
   

   Demo 2.

Answer 2

Are you looking for this Updated Fiddle

h1 {
background: rgba(67, 67, 67, 0.8);
position:relative;
z-index:9;
display:block;
width:100%;
padding:0;
color:#fff;
margin-top:-43px;
}