An image on top of a css box does not show -

i have 2 horizontal lines on top of each other , want put image on top of lines, not able achieve css. image gets hidden behind horizontal lines.

jsfiddle

here image

my html

<div class="creambar"></div>  <div class="graybar silhouette"></div> 

my css

graybar { height: 20px;  background-color: #343434; width: 100%; } .graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); } .creambar { height: 5px; background-color: #d4c293; width: 100%; } 

is want?

.creambar {    border-bottom: 20px solid #343434;    border-top: 4px solid #d4c293;    bottom: -69px;    position: relative;    width: 100%;  }  .graybar {    border-bottom: 20px solid #343434;    background: url("http://i.stack.imgur.com/3xbal.png") 0 0 no-repeat;    height: 62px;    position: relative;  }

<div class="creambar"></div>  <div class="graybar"></div>

see full page.