background image Firefox oddity horizontal centragem

Question

Estou construindo algum código HTML básico para um CMS. Uma das opções de página relacionada no CMS é "imagem de fundo" e "largura da página stretch / altura para a imagem de fundo de largura / altura." para que, com grandes imagens de fundo, a coisa toda se torna visível.

A minha resolução de tela atual é de 1280 x 1024.

Se eu faça o seguinte:

• Especifique uma imagem de fundo que é 1400px de largura
• Especifique "posição" como "centro" (horiz. / Vert.)
• Especifique "largura da página exagero background image largura"

, em seguida, no FF, acontece o seguinte:

• A página está correctamente esticada para 1400px. Eu recebo uma barra de rolagem horizontal como a minha tela é menor do que isso. Até aqui tudo bem.
• e agora a coisa bizarra: a imagem de fundo é não centrada em relação ao 1400px, mostrando assim a imagem completa, mas em relação à minha janela de 1280px, escondendo uma parte da imagem além da borda esquerda da tela, e deixando uma listra branca para a direita em vez de mostrar toda a imagem.
• Não existem elementos adicionais (divs, envoltórios ...) que pode manipular qualquer coisa. Todas as configurações são diretamente no corpo.

Update: IE faz isso corretamente. Google Chrome tem o mesmo problema.

É como se o Firefox processa primeiro a imagem de fundo a largura de 100%, centros de TI, e então percebe que o corpo precisa para ser esticado para 1400px.

É este o comportamento normal Firefox? Todas as idéias que eu posso fazer?

postar um link seria um incómodo pouco como é tudo em um ambiente de desenvolvimento fechado, mas se tudo mais falhar, vou colocar algo juntos para olhar.

O 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

Você está sendo mordido por um capricho da especificação CSS: graças à seção 14.2 , qualquer imagem de fundo que se aplicam ao elemento body torna-se o pano de fundo para html vez. (Este foi destinado para que os autores poderiam continuar usando fundo na etiqueta corpo onde esperava que fosse de navegadores pré-CSS).

No IE, html representa toda a tela do documento e se expande para ajustar a largura do corpo alargada. Em outros navegadores ele age como qualquer outro elemento display: block e mantém o visor largura, independentemente do que você colocar nele. Os outros navegadores são indiscutivelmente mais correto aqui, mas a especificação CSS não é muito clara sobre o tema, eo resultado é que os resultados em IE representam mais de perto o texto de 14,2 sobre a tela. De qualquer maneira, não é realmente especificado comportamento confiável.

Você pode obter resultados consistentes em navegadores, definindo a largura e fundo em html vez de body. (Lembre-se de usar o Modo de Padrões no IE).

Mas a 1400px documento de largura fixa? Soa como uma péssima idéia.

Answer 2

tente adicionar:

width: 100%;
display: table;

ao estilo tag body (também, background-attachment: fixed; pode ser necessária)

Answer 3

o background-position deve ser superior esquerdo; se você definir

body{
margin:0;
padding:0;
}