Aligner une image de background en bas de page sous Firefox ?

Bonjour,

Voila, je bute sur quelque chose d'assez idiot et j'aimerais votre avis, svp.

Je souhaiterais avoir une image d'arrière-plan alignée en bas de page. Sous Internet Explorer, aucun souci, mais Mozilla Firefox ne veut rien savoir. A noter que cette différence d'interprétation du code se fait uniquement avec un alignement en bas de page, quand c'est en haut, ça passe sans problème dans les deux navigateurs.

Voici ce que j'ai essayé dans ma feuille de style :
- mettre l'image de background dans body
- mettre l'image de background dans html
- ajouter des paramètres de hauteur à ces derniers (min-height: 100%, height: auto, height: 100%...)
- mettre l'image de background dans un div englobant tous les autres
- mettre l'image de background dans un calque aligné en bas de page et positionné sous les autres (z-index: -1)

Je précise que je n'utilise pas background-attachment car ce n'est pas ce que je veux.

Ce que j'obtiens sous Firefox ? Soit l'image n'apparaît pas du tout, soit elle est calée en bas de l'écran et fixée à la page.

Si vous avez une piste, merci beaucoup !!!!!!

Bonjour,

atoo a écrit :
Je souhaiterais avoir une image d'arrière-plan alignée en bas de page.

Tu parles bien de bas de page, et pas de bas du viewport? Donc en gros, suivant la hauteur de la page, l'image doit être placée:
- en bas du viewport si le contenu est court;
- en bas du contenu si le contenu est long.
Ce qui n'est finalement pas si simple.

En image de fond sur BODY, avec HTML en height: 100% et BODY en min-height: 100%, ça peut marcher.

atoo a écrit :
Sous Internet Explorer, aucun souci, mais Mozilla Firefox ne veut rien savoir.

Dans la plupart des navigateurs l'élément BODY est un élément magique, qui se comporte à moitié comme une boite CSS mais qui a un certain nombre de comportements uniques, comme le fait d'appliquer une couleur de fond ou image de fond en repeat à tout le canevas et pas uniquement à la boite de l'élément. Il me semble qu'au passage à la version 1.5 ou à la version 2 Firefox a réduit une partie de cette magie, comme le fait que la boite décrite par BODY ait une sorte de min-height:100% automagique.

atoo a écrit :
Si vous avez une piste, merci beaucoup !!!!!!

Si tu as une page en ligne...

Merci beaucoup pour la réponse !

Mon contenu sera toujours long, sa hauteur sera toujours supérieure à celle d'un écran en tous cas.

J'ai en effet essayé de jouer sur height et min-height pour BODY et HTML. Mais au mieux, j'arrive à paramétrer ces derniers pour que leur hauteur soit égale à celle du viewport alors que je voudrais qu'elle soit égale à celle du contenu, moi.

Dès lors, sous Firefox, mon image de background est bien en bas du viewport, mais selon le code, quand je défile, soit elle monte comme si elle était accrochée au texte, soit elle reste en bas du viewport !!! Bref, tout ce que je ne veux pas.

Voici ma page, (l'image de background est visible uniquement sous IE) :
http://lulias.free.fr/test/
Modifié par atoo (28 Nov 2008 - 16:03)

Ah ben voilà, c'est normal que rien ne s'affiche, ton BODY a une hauteur de 0px! Probablement parce que tout le contenu de BODY est... positionné en absolu, donc pas pris en compte pour le calcul de la hauteur de l'élément.

Solution: ne pas utiliser le positionnement absolu ici. C'est d'ailleurs une erreur de l'avoir utilisé ici pour le centrage horizontal, en lieu et place des marges automatiques.

En passant, le code suivant:

<p class=title><b>ACCUEIL</b></p>

devrait plutôt être comme suit:

<h1>Accueil</h1>

, la mise en forme exacte du texte (taille, graisse, couleur, affichage en capitales...) étant ensuite géré en CSS.

J'ai refait ma mise en page sur tes conseils et tout fonctionne ! C'est même plus pratique qu'avant.

Merci beaucoup pour tes précieux conseils !

J'ai utilisé h1 et d'autres choses pour avoir un code plus propre.

Merci encore. J'étais vraiment largué.

Bonjour atoo,

Pour paraphraser Florent :

a écrit :
Vu ton Doctype, tu travailles en mode Quirks. Et c'est mal.
Pour les bons Doctype, voir du côté de Squelettor:
http://css.alsacreations.com/outils/squelettor/index.php

Quelques erreurs subsistent dans ton code (fermeture de balise, absence d'alternative textuelle (balise alt) sur tes images) et ce sera presque parfait

Si tu considères ce sujet comme [résolu] merci de l'indiquer dans le titre de ton sujet en éditant ton premier post

Cdt,
Sylvain