Show image on top of the background color in CSS

Question

I am using Bootstrap and have a layout similar to this:

<div class="container stamp">
    <div class="row">
          Some header text
    </div>
    <div class="row" style="background-color:black">
          More header text here
    </div>
    <div class="row">
          More text
    </div>
</div>

I've set the background image that overlaps all the three rows

.stamp {
  background-image: url('img/hugestamp.gif');
  background-repeat: no-repeat; 
  background-position: left top;
}

The hugestamp.gif spans across all the three rows but the second row has the background color of black, so part of the image is cut off. How do I make the image show up on top of the background color (maybe z-index?) on the 2nd row?

EDIT: I cannot make the colored row transparent. I am trying to achieve the styling here:

In the image, you can see the 3 rows and how the image is shown on top of the colored row

Answer 1

Try this code

Image over colored row

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.container{
  position:relative
}

<div class="container">
    <div class="row">
          Some header text
    </div>
    <div class="row" style="background-color:black">
           More header text here
    </div>
    <div class="row">
          More text
    </div>
    <div class="stamp"></div>
</div>

Image over colored row containing text

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
}
.container{
  position:relative
}
.row:nth-child(2):after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: -20;
}
.row:nth-child(2) {
    position: relative;
    z-index: 10;
    color: #fff;
}

<div class="container">
    <div class="row">
          Some header text
    </div>
    <div class="row">
           More header text here
    </div>
    <div class="row">
          More text
    </div>
    <div class="stamp"></div>
</div>

Image over colored row and below text

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
}
.container{
  position:relative
}
.row:nth-child(2):after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: -20;
}
.row:nth-child(2) {
    position: relative;
    color: #fff;
}

<div class="container">
    <div class="row">
          Some header text
    </div>
    <div class="row">
           More header text here
    </div>
    <div class="row">
          More text
    </div>
    <div class="stamp"></div>
</div>