Show image on top of 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 set a background image that overlaps all three lines

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

hugestamp.gifcovers all three lines, but the second line has a black background, so part of the image is cropped. How to make the image display over the background color (maybe z-index?) In the second line?

EDIT: I cannot make a transparent color transparent. I am trying to achieve a style:

In the image you can see 3 lines and as the image is shown on top of the colored line

Answer 1

Try this code

Color line image

.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>

Run codeHide result

Image by color line 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>

Run codeHide result

.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>

Hide result

Answer 2

css. , . , -

background-color: rgba(255, 0, 0, *0.4*);

.stamp {
  background-image: url('https://www.w3schools.com/css/trolltunga.jpg');
  background-repeat: no-repeat; 
  background-position: left top;
}
#blck {
background-color: rgba(0, 0, 0, 0.4);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container stamp">
  <div class="row">
    Some header text
  </div>
  <div id="blck" class="row">
    More header text here
  </div>
  <div class="row">
    More text
  </div>
</div>

Hide result

Answer 3

:

.container {
  background: #EBEBEB;
  padding: 10px;
}
.row {
  background: white;
  min-height: 100px;
  background-image: url(http://www.clker.com/cliparts/T/j/X/6/y/m/grey-approved-stamp-hi.png);
  background-position: left top;
  background-repeat: no-repeat;
  margin-bottom: 20px;
  padding: 10px;
}

#top {
  padding: 10px;
}

#second {
  background-position: left calc(-180px + 20px + 20px); 
  /* left (-image height + middle row height + paddings) */
}

#third {
  background-position: left calc(-180px - 30px); 
  /* left (-image height + middle row height + paddings) */
}

<div class="container stamp">
    <div id = "first" class="row">
          Some header text
    </div>
    <div id = "second" class="row" style="background-color:#3d3d3d; color: white; min-height: 50px;margin-bottom:0px;">
          More header text here
    </div>
    <div id = "third" class="row">
          More text
    </div>
</div>

Hide result

Answer 4

. 2

<div class="container stamp">
<div class="row">
      Some header text
</div>
<div class="row" style="background-color:black;z-index: -1;position: relative;">
      More header text here
</div>
<div class="row">
      More text
</div>

Answer 5

, , .

, css

,

Answer 6

HTML , css, :before .stamp.

.stamp:before {
    content: "";
    position: absolute;
    background-image: url(http://placehold.it/300);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

<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>

Hide result

Answer 7

The z-index property indicates the stack order of an element. An element with a higher stack order is always before an element with a lower stack order. Note: z-index only works with positioned elements (position: absolute, position: relative or position: fixed).