Background is hidden when overlapping header with negative top margins

Question

I am trying to overlay a caption on 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

Here we have 2 solutions:

• Using display:inline-blockand set width:100%to yours h1, instead use a negative margin-bottomon img:

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

  Demo 1.

• Using position:relativefor img and set for it z-index:-1:

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

  Demo 2.

Answer 2

You are looking for this updated script

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