Discussion :

[Yogui]

Salut

Je suis confronté à un petit problème de CSS...
J'aimerais mettre une image en fond d'un élément <div>. Rien de complexe, j'y parviens très bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div style="background-image: url(img/img-not.gif); z-index: 1; position: absolute; left: 99px; top: 10px;">
    a<br />a
</div>

Par contre, ce ne sont évidemment pas deux lettres que je voudrais avoir comme contenu, mais plusieurs <div>. Et là, mon image de fond n'apparaît plus :/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div style="background-image: url(img/img-not.gif); z-index: 1; position: absolute; left: 99px; top: 10px;">
    <div style="z-index: 2; position: absolute; left: 0px; top: 0px;">
        <img src="img/fondo_noticias.jpg">
    </div>
 
    <div style="z-index: 3; position: absolute; left: 19px; top: 0px;">
        <img src="img/img-noticias.gif">
    </div>
</div>

Les deux GIF sont transparents.
Merci à ceux qui essaieront !

[Swoög]

C'est tout simplement parce que tes "sous-div" sont en position absolute, de ce fait ils sortent du flux, et ton div avec background se retrouve... vide

[bavibavi]

je vote tout pareil passe tes sous div en relatif on donne une taille a ton div principal

[Yogui]

Merci pour votre aide, c'est nickel.
À un détail près, en fait : le DIV conserve la taille qu'il aurait avec l'image à sa place. Le truc, c'est que j'ai déplacé l'image de 400 pixels vers le haut, du coup l'image de fond du DIV s'affiche sur 400 pixels sous l'image :/

Peut-être y a-til moyen de régler ça, je regarderai plus tard.

L'idée que j'avais : je voudrais une image alignée en bas du texte. Je voudrais que cette image soit alignée en bas. Le truc est que le texte se situe dans la partie droite de l'image, et que l'image a une partie haute sur la gauche. Donc je voudrais décaler l'image de manière à enlever le blanc qu'il y a partout.
J'en suis là ^^
J'ai décalé l'image et j'ai pu afficher une image de fond grâce à vos conseils, mais le DIV est trop grand.
Je ne peux évidemment pas connaître la taille di DIV à l'avance :/

[bavibavi]

J'ai rien compris pourquoi tu montes ton image de 400px ? pour la cacher ?

sinon tu peux mettre ton image dans un div avec un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

height=100%

et lui rajouter un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

v-align: bottom

ou quelque chose de ce genre, mais si tu peux êtr eplus clair ca m'aiderais

[Yogui]

Faut dire... Avec mes explications, tu ne peux pas aller bien loin !
Je mets un fichier joint, peut-être que la démo sera plus explicite.
L'idée est d'avoir l'image en bas du texte, sans avoir un espace blanc monstrueux et sans avoir les points de suite qui se trouvent actuellement en bas de la page.