Spécification d'images pour haut, bas, gauche et droite. Comment faire?

Question

Je peux spécifier CSS comme ceci:

 
background: #CFCFCF url(button.bmp) repeat-x top; 

mais si je veux une image pour le haut ainsi que des images pour la gauche, à droite et en bas, comment pourrais-je aller à ce sujet?

Answer 1

Le code HTML

<div class="nice">... inner HTML goes here...</div> 

Le CSS

.nice { 
    border: 1px solid #ffcf86; 
    padding-left: 50px; 
    padding-right: 50px; 
    background: url(i5.gif) no-repeat 50% 50%; 
} 

.nice:before, .nice:after { 
    display: block; 
    height: 41px; 
    margin-left: -50px; 
    margin-right: -50px; 
    font-size: 0; 
} 

.nice:before { 
    content: url(i1.gif); 
    background: url(i2.gif) no-repeat 100% 0; 
} 

.nice:after { 
    content: url(i3.gif); 
    background: url(i4.gif) no-repeat 100% 0; 
} 

Résultat:

http: //dense13.com/blogExamples/multiple-background-images-with- css2/desiredResult.gif

Source http: //dense13.com/blog/2008/08/31/multiple-background-images-with-css2/

Ancienne version:

Il semble que vous pouvez faire quelque chose le long des termes (espacées les valeurs de propriété afin que votre obtenir l'effet):

#some_id { 
    background-image: url('image_url'), url('another_image_url'); 
    background-position: top left,   top right; 
} 

Source Quirksmode, Cela fonctionne dans Safari seulement (et je suis descendu, ont voté à ce sujet).

Answer 2

Vous devez imbriquer certains éléments pour afficher une image chacun. Comme le dit Wayne, vous ne pouvez spécifier qu'une seule image d'arrière-plan pour un élément (jusqu'à ce que CSS3 soit pris en charge dans d'autres navigateurs).

<div id="top"> 
    <div id="container"> 
     Put your content here 
    </div> 
    <div id="right"></div> 
    <div id="bottom"></div> 
</div> 

Ensuite, appliquer le CSS à chaque élément

#top {background: url(top.jpg) no-repeat;} 
#container {background: url(left.jpg) no-repeat;} 
#right {background: url(right.jpg) no-repeat;} 
#bottom {background: url(bottom.jpg) no-repeat;} 

Et vous auriez besoin également de positionner les éléments correctement ...