imagem de fundo centrado está desativado por 1px

Question

A minha página web se senta em uma DIV que é 960px de largura, eu centro desta DIV no meio da página, utilizando o código:

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

Eu preciso a imagem do html / corpo de fundo a telha no meio da página, o que ele faz, no entanto, se o painel visível no navegador é um número ímpar de pixels de largura, em seguida, o fundo centrado e centrado DIV don' t alinhar juntos.

Isso só está acontecendo em FF.

Alguém sabe de uma solução alternativa?

Answer 1

Sim, é problema conhecido. Infelizmente você só pode corrigir div e largura da imagem, ou script uso de propriedade dinamicamente mudança stye.backgroundPosition. Outro truque é colocar a expressão à definição de classe CSS.

Answer 2

Descobri que, fazendo a imagem de fundo em número ímpar de pixels de largura, o problema vai embora para o Firefox.

Configuração padding: 0px 0px 0px 1px; corrige o problema para o IE.

Carlo Capocasa, Travian Games

Answer 3

O (a maioria) problema comum é que sua imagem de fundo tem um número ímpar, enquanto o recipiente é um número par. Eu escrevi um artigo no meu melhor Inglês sobre onde eu também explicar como o navegador posicionado sua imagem: confira aqui .

Answer 4

Eu era capaz de resolver isso com jQuery:

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});

Answer 5

Eu tive o mesmo problema.

Para obter o fundo centrado , você precisa ter um background-image mais larga que a janela . Tente usar um fundo 2500px de largura. Ele vai forçar o navegador para centralizar a parte da imagem que é visível.

Deixe-me saber se ele funciona para você.

Answer 6

Que tal criar um div envoltório com o mesmo background-image.

body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }

O invólucro tem um número par, o fundo vai manter a mesma posição em qualquer tamanho de tela.