Bringing the image in front of background?

Question

I am using css positioning to set the position of an image above the header background. but it isn't working.

Here is the psd image of what i want to achieve:

Note:- Here in the image i am talking about the header background and the green bar with shadow at the top.

Html code:

<header id="masthead" class="site-header" role="banner">
          <div class="header-shadow"></div>
          <hgroup></hgroup>
          <nav role="navigation" class="site-navigation main-navigation">

          </nav><!-- .site-navigation .main-navigation -->
    </header><!-- #masthead .site-header -->

CSS code:-

.site-header{
    position: relative;
    background: url('../images/background.jpg') repeat-x;
    height: 176px;
}
.header-shadow{
    position: absolute;
    background: url('../images/header-shade.jpg') repeat-x;
    height:31px;
    top: 0;
}

Answer 1

You have taken the .header-shadow out of the flow of the page. It doesn't therefore take on the width of its parent. Set width:100%:

.header-shadow {
    position: absolute;
    background: url('../images/header-shade.jpg') repeat-x;
    height:31px;
    width:100%;
    top: 0;
}

JSFiddle

Or even better; don't position it absolutely at all:

.header-shadow {
    background: url('../images/header-shade.jpg') repeat-x;
    height:31px;
}

JSFiddle