Immagine di sfondo di Firefox stranezza di centratura orizzontale

Question

Sto costruendo un codice HTML di base per un CMS. Una delle opzioni relative alla pagina nel CMS è "immagine di sfondo" e "larghezza/larghezza della pagina estesa per larghezza/altezza dell'immagine di sfondo". in modo che con grandi immagini di sfondo, l'intera cosa diventa visibile.

La mia risoluzione dello schermo corrente è 1280 x 1024.

Se faccio la seguente:

• Specificare un'immagine di sfondo che è 1400px vasta
• Specificare "posizione" come "Centro" (orizz./vert.)
• specificare "larghezza della pagina tratto da sfondo larghezza dell'immagine"

° in FF, succede quanto segue:

• la pagina è correttamente allungata a 1400px. Ottengo una barra di scorrimento orizzontale in quanto il mio schermo è più piccolo di quello. Fin qui tutto bene.
• e ora la cosa bizzarra: l'immagine di sfondo è non centrata rispetto al 1400px, mostrando in tal modo l'immagine completa, ma relativa alla mia finestra di 1280px, nascondendo una parte dell'immagine oltre il bordo sinistro dello schermo e lasciando una striscia bianca a destra invece di mostrare l'intera immagine.
• Non ci sono elementi aggiuntivi (DIV, wrapper ...) che possono manipolare qualsiasi cosa. Tutte le impostazioni sono direttamente nel corpo.

Aggiornamento: IE lo fa correttamente. Google Chrome ha lo stesso problema.

È come se Firefox prima restituisse l'immagine di sfondo al 100% della larghezza, la centra e quindi rileva che il corpo deve essere allungato a 1400 px.

È normale questo comportamento di Firefox? Qualche idea su cosa posso fare?

Pubblicare un collegamento sarebbe un po 'macchinoso in quanto è tutto in un ambiente di sviluppo chiuso, ma se tutto il resto fallisce, metterò insieme qualcosa da guardare.

Il 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

Sei stato morso da un capriccio della specifica CSS : grazie a section 14.2, qualsiasi immagine di sfondo applicata all'elemento body diventa lo sfondo su html. (Questo era inteso in modo che gli autori potessero continuare a utilizzare lo sfondo sul tag del corpo in cui si aspettavano che fosse dai browser pre-CSS.

In IE, html rappresenta l'intero canvas del documento e si espande per adattarsi alla larghezza del corpo ingrandita. In altri browser agisce come qualsiasi altro elemento display: block e mantiene la larghezza della vista indipendentemente da ciò che viene inserito. Gli altri browser sono probabilmente più corretti qui, ma la specifica CSS non è molto chiara sull'argomento, e il risultato è che i risultati in IE rappresentano più da vicino la dicitura di 14.2 sulla tela. Ad ogni modo, non è un comportamento affidabile specificato.

È possibile ottenere risultati coerenti tra i browser impostando la larghezza e lo sfondo su html anziché su body. (Ricordarsi di utilizzare la Modalità standard in IE.)

Ma un documento a larghezza fissa 1400px? Sembra una pessima idea.

Answer 2

il background-position va a sinistra sopra; hai impostato

body{ 
margin:0; 
padding:0; 
} 

Answer 3

prova ad aggiungere:

width: 100%; 
display: table; 

allo stile body tag (anche potrebbe essere richiesto background-attachment: fixed;)