Z-index superposition de background

Bonsoir,

je cherche a superposer une image au background de mon footer.

J'ai donc intégré un sous div a mon footer avec une id.

Il y a donc un background sur le footer et un sur le nouveau div.

J'ai beau joué avec le z index, le div parent étant en relative et le div fils étant en absolute => ya pas moyen de faire apparaitre l'image du dessus.

Quelqu'un aurait il une idée ou déjà rentré le problème

Même si ça n'aidera pas, voici le bout de css :

#footer {
font-size: 1em;
background: #FFFFFF url(img/bg_footer.jpg) repeat-x;
padding: 30px 0 20px 0;
clear: both;
width : 100%;
text-align: center;
position:relative;
z-index:inherit;
}

#postit {
background-image:url(img/postit.png);
position:absolute;
bottom:0;
left:0;
z-index:auto;
}

Merci d'avance

Bonjour,

Je ne vois à priori aucun problème à faire apparaître une image (élément <img>) par dessus un background, c'est même le comportement par défaut.
As-tu un exemple visuel du résultat attendu?

ce n'est pas une image au dessus d'un background mais le background du div postit qui doit pparaitre au dessus du background du div footer.

et le résultat attendu, je veux que dans le coin inférieur gauche, il y ait un post it qui superpose mon footer mais je veux que ce post it soit collé à gauche alors que ma page est centré (900px) donc je ne peux pas l'insérer en tant qu'image et j'ai pensé à le faire en tant que background d'un sousdiv de foot qui lui est a 100% de l'écran

Salut,

Le problème ne vient pas des z-index qui, au passage, ne servent à rien mais du fait que tu crées un conteneur "postit" vide, ses propriétés width et height étant, par défaut, égales à 0; c'est ce qui fait que tu ne vois rien apparaitre. Il suffit donc de définir ces propriétés.
Modifié par koala64 (27 Jul 2008 - 09:55)

Merci pour ta réponse même si j'avais trouvé entre temps.

Par contre, moi je n'ai pas contourné le problème en définissant le width et le height mais en mettant l'image sous forme d'img dans le xhtml plutot que dans le css.

A l'utilisation, y aura t'il une différence à adopter l'une ou l'autre des solutions ?

Merci d'avance

Si tu as placé ton image dans le xhtml, il faut que celle-ci ait un alt="".

Et la seule différence notable est que si tu ne disposes pas de CSS, tu as quand même cette image qui apparait. Disons que dans la majorité des cas, ce n'est pas souhaitable mais parfois, ça peut être judicieux.

ok pour le alt c'était bon

par contre ma plus grosse interrogation concerne le comportement de cette image face à un redimensionnement de la fenetre.

Aucune différence à ce niveau là en fonction de la solution choisie ?

Merci