image de fond Firefox centrage horizontal bizarrerie

Question

Je construis un code HTML de base pour un CMS. L'une des options associés aux pages dans le CMS est « l'image d'arrière-plan » et « page stretch largeur/hauteur à la largeur/hauteur de l'image d'arrière-plan. » de sorte qu'avec de grandes images de fond, le tout devient visible.

Ma résolution d'écran est de 1280 x 1024.

Si je fais ce qui suit:

• Spécifiez une image de fond qui est 1400px large
• Spécifiez "position" comme "Centre" (horiz./vert.)
• spécifier "largeur de page d'étirage à la largeur de l'image d'arrière-plan"

e en FF, ce qui suit se produit:

• la page est correctement tendue à 1400px. Je reçois une barre de défilement horizontale car mon écran est plus petit que cela. Jusqu'ici tout va bien.
• et maintenant la chose bizarre: l'image de fond est pas centrée par rapport au 1400px, montrant ainsi l'image complète, mais par rapport à ma fenêtre de 1280px, cachant une partie de l'image au-delà du bord gauche de l'écran et en laissant une bande blanche à droite au lieu de montrer l'image entière.
• Il n'y a pas d'éléments supplémentaires (divs, emballages ...) qui pourraient manipuler quoi que ce soit. Tous les paramètres sont directement dans le corps.

Mise à jour: IE fait correctement. Google Chrome a le même problème. C'est comme si Firefox rendait l'image d'arrière-plan à 100% de sa largeur, la centrait et remarquait que le corps devait être étiré à 1400px.

Est-ce comportement Firefox normal? Des idées que je peux faire?

La publication d'un lien serait un peu lourde car tout est dans un environnement de développement fermé, mais si tout le reste échoue, je vais mettre quelque chose ensemble à regarder.

Le CSS:

body 
{ 
background-image: url(http://www.domain.com....image.jpg); 
background-repeat: no-repeat; 
background-position: center center; 
min-width: 1400px; 
height: 100%; 
} 

Answer 1

Vous être mordu par une bizarrerie de la spécification CSS : grâce à section 14.2, toute image de fond que vous appliquez à l'élément body devient l'arrière-plan html à la place. (Ceci était destiné à permettre aux auteurs de continuer à utiliser l'arrière-plan sur la balise body où ils s'attendaient à ce que ce soit des navigateurs pré-CSS.

Dans IE, html représente l'ensemble du document et s'étend pour s'adapter à la largeur du corps. Dans d'autres navigateurs, il agit comme n'importe quel autre élément display: block et conserve la largeur de la fenêtre indépendamment de ce que vous y mettez. Les autres navigateurs sont sans doute plus correct ici, mais la spécification CSS n'est pas très claire sur le sujet, et le résultat est que les résultats dans IE représentent plus étroitement le libellé de 14.2 sur le canevas. De toute façon, ce n'est pas vraiment un comportement fiable spécifié.

Vous pouvez obtenir des résultats cohérents dans tous les navigateurs en définissant la largeur et l'arrière-plan sur html au lieu de body. (N'oubliez pas d'utiliser le mode Standards dans IE.)

Mais un document de largeur fixe 1400px? Cela ressemble à une très mauvaise idée.

Answer 2

la position de fond doit rester en haut; avez-vous mis

body{ 
margin:0; 
padding:0; 
} 

Answer 3

essayer d'ajouter:

width: 100%; 
display: table; 

au style tag body (également, background-attachment: fixed; pourrait être nécessaire)