CSS mostrar imagen de fondo div encima de otros elementos contenidos

Question

No estoy seguro si esto es posible y cómo, pero intenté jugar con el índice Z de los elementos en mi código sin éxito.

Tengo un elemento div que tiene una imagen de fondo establecida en css. dentro del div, tengo otros elementos, como div e img. Intento que la div principal que contiene la imagen de fondo permanezca en la parte superior, ya que quiero que esa imagen de fondo se muestre encima de los otros elementos (esta imagen de fondo tiene algunas esquinas redondeadas que quiero mostrar en la parte superior de la imagen incluida en este div).

Ejemplo HTML:

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

Ejemplo 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; 
} 

Answer 1

me gustaría poner una posición absoluta, z-index: 100; lapso (o luces) con el conjunto background: url("myImageWithRoundedCorners.jpg"); en él dentro el #mainWrapperDivWithBGImage.

Answer 2

Si está utilizando la imagen de fondo para las esquinas redondeadas, prefiero aumentar el estilo de relleno del div principal para dejar espacio suficiente para que las esquinas redondeadas de la imagen de fondo sean visibles.

intente aumentar el relleno del estilo principal 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: Asumo las esquinas redondeadas tienen un radio de 10px.

Answer 3

¿Qué le parece hacer el <div id="mainWrapperDivWithBGImage"> como tres divs, donde los dos divs externos tienen las imágenes de esquinas redondeadas, y el div del medio simplemente tiene un color de fondo para que coincida con las imágenes de esquina redondeadas. Posteriormente, se podría colocar simplemente los otros elementos dentro de la div medio, o:

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

continuación

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> 

Es posible que tenga que hacer position: relative; y tal.