web-dev-qa-db-fra.com

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

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 d'arrière-plan définie dans css. à l'intérieur du div, j'ai d'autres éléments, comme div et img. J'essaie d'avoir 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 montrer au-dessus de l'image incluse dans cette 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;
}
htmlcssz-indexbackground-image
17
IntricatePixels

Je mettrais une plage (ou des plages) absolument positionnée, z-index: 100; Avec la background: url("myImageWithRoundedCorners.jpg"); définie à l'intérieur la #mainWrapperDivWithBGImage.

19
JakeParis

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

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

Alors

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 la position: relative; et autres choses de ce genre.

0
Adam

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

Essayez d'augmenter le remplissage du style div principal:

#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 10 pixels.

0
Chandu