immagine di sfondo Firefox centratura orizzontale stranezza

Question

Sto costruendo un certo codice HTML di base per un CMS. Una delle opzioni di pagina relativi al CMS è "immagine di sfondo" e "larghezza della pagina tratto / altezza per l'immagine di sfondo larghezza / altezza." in modo che con grandi immagini di sfondo, il tutto diventa visibile.

La mia risoluzione dello schermo corrente è 1280 x 1024.

Se faccio la seguente:

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

poi in FF, accade quanto segue:

• la pagina viene correttamente allungato a 1400px. Ottengo una barra di scorrimento orizzontale, come lo schermo è più piccolo di quello. Fin qui tutto bene.
• e ora la cosa bizzarra: l'immagine di sfondo è non relativa centrato 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 sulla destra invece di mostrare l'intera immagine.
• Non ci sono ulteriori elementi (div, wrapper ...) che potrebbero manipolare qualsiasi cosa. Tutte le impostazioni sono direttamente nel corpo.

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

E 'come se Firefox rende prima l'immagine di sfondo al 100% la larghezza, centra, e poi si accorge che il corpo ha bisogno di essere allungato a 1400px.

È normale comportamento di Firefox? Tutte le idee che cosa posso fare?

La pubblicazione di un collegamento sarebbe un po 'ingombrante, come è tutto in un ambiente di sviluppo chiuso, ma se tutto il resto fallisce, io messo 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 sezione 14.2 , qualsiasi immagine di sfondo si applica all'elemento body diventa lo sfondo per html invece. (Questo è stato destinato in modo che gli autori potessero continuare a utilizzare sfondo sul tag body, dove si aspettavano che fosse dai browser pre-CSS.)

In IE, html rappresenta tutta la tela documento e si espande per adattarsi alla larghezza del corpo allargata. In altri browser si comporta come qualsiasi altro elemento display: block e mantiene la larghezza viewport indipendentemente da ciò che si mette in esso. Gli altri browser sono senza dubbio più corretto qui, ma le specifiche CSS non è terribilmente chiaro sul tema, e il risultato è che i risultati in IE rappresentano più da vicino la formulazione del 14,2 sulla tela. In entrambi i casi, non è davvero specificato comportamento affidabile.

È possibile ottenere risultati coerenti tra i browser impostando la larghezza e lo sfondo su html invece di body. (Ricorda di utilizzare la modalità standard in IE.)

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

Answer 2

prova ad aggiungere:

width: 100%;
display: table;

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

Answer 3

il background-position va a sinistra sopra; hai impostato

body{
margin:0;
padding:0;
}