How to display parent's bg-image over child elements bg-color?

问题

So I have a section with lines of content in it. The lines cover 100% of width of the window, the content, however, is only shown at the right side of section. On the left there must be an image. I tried to do it with bg-image and z-index but problem is its getting buried beneath lines' bg-color. So i wonder if there is a smart way to do it or the only way is to use inline image tag?
Codepen: https://codepen.io/anon/pen/KazpYM

<p>it is impossible to edit cofe on mobile so i just give u a link </>

回答1:

This is simple way of hack:)

.line{
    width: 100%;
    height: 200px;
  position:relative;
  z-index:-1;
}

回答2:

Try use position: relative - position: absolute. But initially the whole idea of a wrong.

.athletes {
  background-image: url(http://i.imgur.com/Ytf12qW.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: 45% 100%;
  background-size: 45% 100%;
  background-position: 14%;
  background-color: transparent;
  position: relative;
  min-height: 600px;
}
.line {
  width: 100%;
  height: 200px;
  z-index: -10;
  position: absolute;
}
.line-gray {
  background-color: #c1c1c1;
  bottom: 200px;
}
.line-violet {
  background-color: #5e42b0;
  bottom: 0;
}

<div class="athletes">
  <div class="line"></div>
  <div class="line line-gray"></div>
  <div class="line line-violet"></div>
</div>

来源：https://stackoverflow.com/questions/41599594/how-to-display-parents-bg-image-over-child-elements-bg-color