CSS affiche l'image d'arrière-plan du div au-dessus des autres éléments contenus

Question

Je ne sais pas si c'est possible et comment, mais j'ai essayé de jouer avec le z-index des éléments dans mon code, sans succès.

J'ai un élément div qui a une image de fond définie en css. À l'intérieur de l'élément div, j'ai d'autres éléments, comme div et img. J'essaie de faire en sorte que le div principal qui contient l'image d'arrière-plan reste en haut, car je veux que cette image d'arrière-plan s'affiche au-dessus des autres éléments (cette image d'arrière-plan a des coins arrondis que je veux faire apparaître au-dessus de l'image incluse dans ce div).

Exemple HTML :

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

Exemple 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

Je mettrais une position absolue, z-index: 100; (ou des travées) avec l'option background: url("myImageWithRoundedCorners.jpg"); mettre sur elle à l'intérieur de el #mainWrapperDivWithBGImage .

Answer 2

Si vous utilisez l'image d'arrière-plan pour les coins arrondis, je préférerais augmenter le style de remplissage de la division principale afin de laisser suffisamment de place pour que les coins arrondis de l'image d'arrière-plan soient visibles.

Essayez d'augmenter le padding du style de la div principale :

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

P.S : Je suppose que les coins arrondis ont un rayon de 10px.

Answer 3

Que diriez-vous de rendre le <div id="mainWrapperDivWithBGImage"> comme trois divs, où les deux divs extérieures contiennent les images des coins arrondis, et la div centrale a simplement une couleur d'arrière-plan correspondant aux images des coins arrondis. Ensuite, vous pouvez simplement placer les autres éléments à l'intérieur de la division centrale, ou.. :

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

Puis

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>

Vous devrez peut-être faire position:relative ; et autres.