CSS показывает фоновое изображение div поверх других содержащихся элементов

Не уверен, что это возможно и как, но я пробовал играть с z-index элементов в моем коде без успеха.

У меня есть элемент div, который имеет фоновое изображение, установленное в css. внутри div, у меня есть другие элементы, такие как div и img. Я пытаюсь, чтобы основной div, содержащий фоновое изображение, остался на вершине, так как я хочу, чтобы это фоновое изображение отображалось поверх других элементов (это фоновое изображение имеет некоторые закругленные углы, которые я хочу показать поверх изображения, включенного в этом div).

Пример HTML:

<div id="mainWrapperDivWithBGImage">
   <div id="anotherDiv">
      <!-- show this img behind the background image 
      of the #mainWrapperDivWithBGImage div -->
      <img src="myLargeImage.jpg" />
   </div>
</div>

Пример CSS:

/* How can I make the bg image of this div show on top of other elements contained
   Is this even possible? */

#mainWrapperDivWithBGImage {
  background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent;
  height: 248px;
  margin: 0;
  overflow: hidden;
  padding: 3px 0 0 3px;
  width: 996px;
}

Ответ 1

Я поставил бы абсолютно позиционированный диапазон z-index: 100; (или охватывает) с помощью background: url("myImageWithRoundedCorners.jpg");, установленного на нем внутри #mainWrapperDivWithBGImage.

Ответ 2

Если вы используете фоновое изображение для закругленных углов, я предпочел бы увеличить стиль заполнения основного div, чтобы дать достаточно места для видимых закругленных углов фонового изображения.

Попробуйте увеличить размер основного стиля div:

#mainWrapperDivWithBGImage 
{   
    background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent;   
    height: 248px;   
    margin: 0;   
    overflow: hidden;   
    padding: 10px 10px;   
    width: 996px; 
}

P.S: Я предполагаю, что закругленные углы имеют радиус 10px.

Ответ 3

Как сделать <div id="mainWrapperDivWithBGImage"> как три div, где два внешних divs содержат изображения округлых углов, а средний div просто имеет фоновый цвет для соответствия закругленным угловым изображениям. Затем вы можете просто поместить другие элементы внутри среднего div или:

#outside_left{width:10px; float:left;}
#outside_right{width:10px; float:right;}
#middle{background-color:#color of rnd_crnrs_foo.gif; float:left;}

Тогда

HTML:

<div id="mainWrapperDivWithBGImage">
  <div id="outside_left><img src="rnd_crnrs_left.gif" /></div>
  <div id="middle">
    <div id="another_div"><img src="foo.gif" /></div>
  <div id="outside_right><img src="rnd_crnrs_right.gif" /></div>
</div>

Возможно, вам придется заняться позицией: relative; и т.д.