[Résolu] Background center sur Mozilla

Bonjour,

Je suis à la recherche d'une propriété permettant de positionner le background de la page web en center center (background-position) et d'obtenir le même résultat sur Mozilla que sur Chrome et Explorer.

En fait j'ai une grande image (genre 2000x1000) et je souhaite la positionner en background de manière à ce que le centre de l'image (en coordonnées 1000x500 donc) se place pile au milieu de la page web. C'est facile à obtenir en mettant background-position: center center sur chrome et explorer mais sur mozilla il me bouffe la moitié du haut de l'mage.

Une idée ? Merci

Le problème est à priori le suivant: par défaut, Firefox donne à l'élément BODY la hauteur du contenu de la page. On peut s'en rendre compte en appliquant une bordure à cet élément. Ton image de fond va donc se placer au milieu de l'élément BODY, plutôt qu'au milieu du viewport.

Il y a par contre une subtilité: si tu appliques une couleur de fond à l'élément BODY, elle s'appliquera à l'ensemble de la page et pas juste à l'élément lui-même.

Une solution possible c'est d'appliquer un min-height:100% à BODY. Pour qu'il soit pris en compte, il faut que le parent de BODY (l'élément HTML) ait une hauteur explicite, donc il faudra déclarer un height:100% pour ce dernier.

Ça fonctionne.
Super merci beaucoup.
Mais du coup j'ai un petit scrolling à droite (je précise que lors de mon essai mon body était vide, je lookais juste le fond). Mais bon c'est pas gênant. Merci.
Modifié par mentinet (08 Feb 2011 - 14:51)