imagem de fundo centrado está desativado por 1px
-
02-07-2019 - |
Pergunta
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?
Solução
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.
Outras dicas
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
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 .
Eu era capaz de resolver isso com jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
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ê.
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.