Imagen de fondo de Firefox odisea de centrado horizontal

Question

Estoy creando código HTML básico para un CMS. Una de las opciones relacionadas con la página en el CMS es "Imagen de fondo" y "Ampliar el ancho/alto de la página al ancho/alto de la imagen de fondo". para que con imágenes de fondo grandes, todo se vuelva visible.

Mi resolución de pantalla actual es de 1280 x 1024.

Si hago lo siguiente:

• Especifique una imagen de fondo que es 1400px de ancho
• Especificar "posición" como "Centro" (horiz./vert.)
• especificar "ancho de página tramo de ancho de la imagen de fondo"

º es en FF, sucede lo siguiente:

• la página está estirada correctamente a 1400px. Obtengo una barra de desplazamiento horizontal ya que mi pantalla es más pequeña que eso. Hasta aquí todo bien.
• y ahora la cosa extraña: la imagen de fondo es no centrada con respecto a la 1400px, mostrando así la imagen completa, pero relación con mi visor de 1280px, ocultando una parte de la imagen más allá del borde izquierdo de la pantalla y dejando una franja blanca a la derecha en lugar de mostrar toda la imagen.
• No hay elementos adicionales (DIV, envoltorios ...) que puedan manipular nada. Todas las configuraciones están directamente en el cuerpo.

Actualización: IE lo hace correctamente. Google Chrome tiene el mismo problema.

Es como si Firefox primero representa la imagen de fondo al 100% de ancho, lo centra y luego nota que el cuerpo necesita estirarse a 1400px.

¿Es este el comportamiento normal de Firefox? ¿Alguna idea de lo que puedo hacer?

Publicar un enlace sería un poco engorroso, ya que todo está en un entorno de desarrollo cerrado, pero si todo lo demás falla, pondré algo en común para ver.

El 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

Usted está siendo mordido por un capricho de la especificación CSS : gracias a section 14.2, cualquier imagen de fondo que aplique al elemento body pasa a ser el fondo de html. (Esto fue diseñado para que los autores pudieran continuar usando el fondo en la etiqueta del cuerpo donde esperaban que fuera de navegadores anteriores a CSS.)

En IE, html representa todo el lienzo del documento y se expande para adaptarse al ancho del cuerpo ampliado. En otros navegadores, funciona como cualquier otro elemento display: block y mantiene el ancho de la ventana independientemente de lo que coloque en él. Los otros navegadores son posiblemente más correctos aquí, pero la especificación CSS no es muy clara sobre el tema, y ​​el resultado es que los resultados en IE representan más de cerca la redacción de 14.2 sobre el lienzo. De cualquier forma, no se especifica un comportamiento confiable.

Puede obtener resultados consistentes en todos los navegadores estableciendo el ancho y el fondo en html en lugar de body. (Recuerde utilizar el modo estándar en IE)

¿Pero un documento de ancho fijo 1400px? Suena como una muy mala idea.

Answer 2

la posición de fondo se debe dejar la parte superior; ¿Ha definido

body{ 
margin:0; 
padding:0; 
} 

Answer 3

intento de añadir:

width: 100%; 
display: table; 

al estilo body etiqueta (también, background-attachment: fixed; pudieran requerirse)