[RESOLU] Image en background d'une autre image

Bonjour,

J'essaie de mettre une image en arrière plan d'une autre image pour faire le cadre de celle-ci.

Cependant, l'image de fond n'apparait pas. Mais si je la met en arrière plan du DIV conteneur, aucun souci.

Mais je veux le mettre en arrière plan de l'image car il n'y a pas toujours d'image donc je veux éviter que l'arrière plan soit visible sans image.

div#image_right {
   float:left;
   margin:50px 0 0 30px;
   width:207px;
   height:194px;
}
div#image_right img {
   background: #fff url(images/contours_photo_centre.jpg) no-repeat 0 0px; 
}


<div id="image_right">
             <img name="Image1" src="uploads/images/images_contenu/ctsp1.jpg"/>
</div>

Est-ce que j'ai loupé quelque chose ?

D'avance merci,

Heriquet
Modifié par Heriquet (08 May 2009 - 22:56)

Salut,

Ca parait normal non ? Vu que ton image est par-dessus celle que tu as en background ...

Bonjour,

regarde avec Firebug quelles sont les dimensions de ces deux éléments et ... l'image HTML a-t'elle des zones de transparence? EDIT: .jpg je pose de ces questions moi
Modifié par Felipe (08 May 2009 - 17:43)

Effectivement, si tu mets une image en fond d'une image opaque, ça ne va pas donner grand chose.

Si le but est d'afficher un cadre via une image de fond, ce que tu as fait est insuffisant car ton élément IMG ne va pas modifier ses dimensions comme par magie pour s'adapter aux dimensions de l'image de fond. Par contre, tu peux peut-être jouer sur du padding (sur l'élément IMG) pour un résultat intéressant.

Par exemple si tu as une image de 100x100px, et un fond de 120x120px que tu veux utiliser pour dessiner une bordure décorée de 10px de large tout autour de l'image, tu peux avoir le code suivant:

div#image_right img {
    padding: 10px;
    background: #fff url(images/contours_photo_centre.jpg) no-repeat 0 0px; 
}

Et voilà.

Arf la réponse parait tellement évidente... je devrais pas faire 15 choses en même temps moi...

Merci pour ta réponse Florent, c'est bien les paddings qui me sauvent.

Merci aussi aux autres.

Bon WE.