Firefox Hintergrundbild horizontale Zentrierung Kuriosität

Question

Ich baue einige grundlegende HTML-Code für ein CMS. Eine der seitenbezogenen Optionen im CMS ist "Hintergrundbild" und "Seitenbreite/-höhe auf Hintergrundbildbreite/-höhe dehnen". so dass mit großen Hintergrundbildern das Ganze sichtbar wird.

Meine aktuelle Bildschirmauflösung beträgt 1280 x 1024.

Wenn ich Folgendes tun:

• Geben Sie ein Hintergrundbild, das 1400px breit ist
• "Position" Geben Sie als "mitte" (horiz./vert.)
• angeben "Stretch Seitenbreite Hintergrund Bildbreite"

th en in FF passiert folgendes:

• Die Seite ist korrekt auf 1400px gestreckt. Ich bekomme eine horizontale Bildlaufleiste, da mein Bildschirm kleiner ist. So weit, ist es gut.
• und jetzt das seltsame Ding: das Hintergrundbild ist nicht zentriert relativ zu den 1400px, so dass das volle Bild, aber relativ zu meinem Viewport von 1280px, einen Teil des Bildes über den linken Rand des Bildschirms versteckt und lassen Sie einen weißen Streifen auf der rechten Seite, anstatt das ganze Bild zu zeigen.
• Es gibt keine zusätzlichen Elemente (DIVs, Wrapper ...), die alles manipulieren könnten. Alle Einstellungen sind direkt im Körper.

Update: IE tut es richtig. Google Chrome hat das gleiche Problem.

Es ist, als ob Firefox zuerst das Hintergrundbild mit 100% Breite rendert, es zentriert und dann bemerkt, dass der Körper auf 1400px gestreckt werden muss.

Ist das normales Verhalten von Firefox? Irgendwelche Ideen, was ich tun kann?

Einen Link zu veröffentlichen wäre ein wenig umständlich, da es alles in einer geschlossenen Entwicklungsumgebung ist, aber wenn alles andere fehlschlägt, werde ich etwas zusammenstellen, um es anzuschauen.

Die 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

Sie sind durch eine Marotte der CSS-Spezifikation gebissen : Dank section 14.2 wird jedes Hintergrundbild, das Sie auf das Element body anwenden, zum Hintergrund für html. (Dies war so gedacht, dass Autoren den Hintergrund auf dem Body-Tag weiter verwenden konnten, wo sie erwarteten, dass es von Browsern vor CSS stammt.)

In IE stellt html die gesamte Dokument-Leinwand dar und wird erweitert, um der vergrößerten Körperbreite zu entsprechen. In anderen Browsern verhält es sich wie jedes andere display: block Element und behält die Breite des Darstellungsbereichs bei, unabhängig davon, was Sie darin einfügen. Die anderen Browser sind wohl korrekter hier, aber die CSS-Spezifikation ist nicht sehr klar in Bezug auf das Thema, und das Ergebnis ist, dass die Ergebnisse in IE eher den Wortlaut von 14.2 über die Leinwand darstellen. So oder so, es ist nicht wirklich zuverlässiges Verhalten angegeben.

Sie können konsistente Ergebnisse in allen Browsern erzielen, indem Sie die Breite und den Hintergrund auf html anstelle von body setzen. (Denken Sie daran, den Standardmodus im IE zu verwenden.)

Aber ein 1400px Dokument mit fester Breite? Klingt nach einer wirklich schlechten Idee.

Answer 2

der Hintergrund-Position links oben werden sollte; haben Sie

body{ 
margin:0; 
padding:0; 
} 

Answer 3

Versuch gesetzt und fügte hinzu:

width: 100%; 
display: table; 

zum body Tag-Stil (auch, background-attachment: fixed; erforderlich sein könnten)