[Résolu] Problème background-position sous Firefox 3

Bonjour,

Après une petite recherche sur le forum, je n'ai pas trouvé la solution à mon problème. Il est possible que je sois passée à côté, auquel cas je m'en excuse platement par avance ><

Donc voilà mon souci : j'essaye de centrer une image de fond en vertical et en horizontal.

J'utilise pour cela la CSS suivante (extrait) :

body {
	font-family: "Lucida Grande", Verdana, sans-serif;
	background-color: #000000;
	background-image: url(imgs/fond_black.jpg);
	background-repeat: no-repeat;
	background-position: center; 
	font-size: 11px;
	line-height: 1.7em;
	padding: 0;
	margin: 0;
}

Ca marche parfaitement sous IE 7 mais pas sous Firefox 3. Sous FF3, mon image est décalée vers le haut. J'ai fait des tests avec une image de fond plus petite de 300 pixels de haut, et on dirait que le milieu de l'image se cale en haut du site

J'ai essayé également background-position: center center; et background-position: 50% 50%; qui donnent les mêmes résultats.

La page en question se trouve ***.


Merci d'avance de l'aide que vous pourrez m'apporter
Modifié par Kyborash (18 Dec 2008 - 23:30)

Hello,

Adresse de la page supprimée tant que tu n'as pas supprimé ou remplacer ton image de fond de 800+ ko. À ce niveau là, c'est criminel. Déjà qu'en haut débit c'est très pénible, alors je plains la bonne âme qui aurait voulu t'aider en visitant cette page et qui serait en bas débit.

Sinon pour le problème lui-même ça vient du fait que BODY a un fonctionnement particulier, qui diffère pour:
- les couleurs de fond et images de fond répétées en hauteur (affichées sur toute la surface du canevas);
- les images de fond non répétées en hauteur (affichées sur toute la hauteur de la boite dessinée par BODY, boite qui ne prend pas forcément toute la hauteur du viewport).
Modifié par Florent V. (18 Dec 2008 - 20:48)

Désolée, désolée, désolée
C'est le tout début du projet et aucune image n'est encore optimisée ><

Mais du coup, on va peut-être devoir les passer en JPG et s'arranger pour alléger le poids, alors on va peut être enlever complètement l'image de fond, esquivant ainsi ce problème de background pas centré...

Mais par rapport à ce problème de Body, je suppose qu'il n'y a aucun moyen de forcer le body à prendre toute la hauteur du viewport ? (il s'agit bien de la partie visible ?)
Et finalement, si je souhaite quand même une image de fond, je ferais peut-être mieux de la mettre dans un autre div sous mon div global ?

Merci pour ta réponse précédente ^^

Kyborash a écrit :
Mais par rapport à ce problème de Body, je suppose qu'il n'y a aucun moyen de forcer le body à prendre toute la hauteur du viewport ? (il s'agit bien de la partie visible ?)

Le viewport correspond à la zone de visualisation du navigateur, oui. Et pour que BODY prenne toujours au minimum cette hauteur avec tous les navigateurs:

html {
	height: 100%;
}
body {
	min-height: 100%;
	margin: 0;
	padding: 0;
}

Aaah, d'accord, j'avais essayé en mettant un 100% au body mais ça n'avait pas marché.

Merci beaucoup, j'ai essayé et ça se cale parfaitement