Superposer 2 images

Bonjour à tous.

Depuis ce matin, j’essaie de superposer 2 images.

J'ai une image d'un produit qui s'affiche grâce à une balise <img> dans un Div.
Lorsque le produit est en promo, j'aimerai venir afficher sur l'image un p'tit truc.

J'ai donc mon div :

.shewyhomeFeaturedProducts {
 text-align:center;
 margin:0 auto;
 margin-top:15px;
 height:100px;
 width:100px;
 min-height:100px;
 min-width:100px; 
 background:url(../img/homefeatured/fondkdo.png);
 z-index:3;
}

Le background étant ici un "cadeau"

Coté image j'ai :

style="z-index:1;
border-radius:10px;
width:95px;
height:95px;
position:relative;
top:0;
bottom:0;

La largeur / hauteur de l'image est différent afin de permettre les tests. Je n'y arrive tellmt pas que je n'était plus sûr que le fond s'affichait bien.

Coté HTML :

<div class="shewyhomeFeaturedProducts">
<img style="z-index:1; border-radius:10px; width:95px; height:95px; position:relative; top:0; bottom:0;" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" />
</div>

Et voilà le résultat :


Qui peux m'aider ? Je ne comprend pas pkoi ça ne fonctionne pas !

a écrit :

Pour ceux qui veulent bien m'aider, pour éviter de refaire la page, je vous ai fait une petite page HTML avec juste le Div et le IMG à l'identique à mon site, avec les styles inline
le zip est ici : http://shop.1001sens.fr/shewy.zip (7ko)

Merci à tous
Modifié par shewy (04 Dec 2011 - 13:16)

Bonjour et bienvenue,

tu veux placer une image de fond SUR une image ?

Pourrais-tu utiliser http://jsfiddle.net avec des images genre http://dummyimage.com/200x16 stp ? Ça sera plus pratique

Merci.

Oui c'est bien ça.

Voilà la meme chose via le site que tu m'as donné... je ne sais pas si plus simple, mais je l'ai fait. http://jsfiddle.net/RRF9S/1/[/url
Modifié par shewy (04 Dec 2011 - 13:56)

Hello,

J’espère que ça t’aidera à mieux comprendre le fonctionnement de tout ça : http://jsfiddle.net/htmlzengarden/zGx7e/

En particulier, tu devrais voir ou revoir le modèle de boite CSS.

yéé ! super.

J'y étais arrivé en faisant 2 images + une position:relative; + top:-100px..
un peu crado.

J'ai donc tout remplacé par ce que tu m'as expliqué. et nikel !

J'étais pas loin dans tous mes essais. Je ne pense jamais au ":after".

Je tiens à te remercier pour ce coup de main.

Le résultat est parfait !