Приведение изображения перед фоном?

Question

Я использую css-позиционирование, чтобы установить положение изображения над фоном заголовка. но он не работает.

Вот СДП образ того, что я хочу добиться:

Примечание: - Здесь в образе я говорю о фоне заголовка и зеленого цвета с тенью на Вверх.

Html код:

<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 код: -

.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

Вы отправили сообщение .header-shadow из потока страницы. Поэтому он не принимает ширину своего родителя. Набор width:100%:

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

JSFiddle

Или еще лучше; не располагайте его абсолютно на все:

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

JSFiddle

Answer 2

надеюсь, что это поможет, использовать заголовок-тень -> позиция как относительное, он будет работать нормально

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

Answer 3

Вы пытались установить атрибут левого css, например

left:0px; 

Вы также можете попробовать определить ширину и высоту изображения внутри css, хотя это обычно должно быть разработано браузером.