La imagen de fondo centrada está desviada en 1 px

StackOverflow https://stackoverflow.com/questions/113253

  •  02-07-2019
  •  | 
  •  

Pregunta

Mi página web se encuentra en un DIV de 960 px de ancho, centro este DIV en el medio de la página usando el 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;}

Necesito que la imagen de fondo del html/body se coloque en mosaico en el centro de la página, lo cual es así; sin embargo, si el panel visible en el navegador tiene un número impar de píxeles de ancho, entonces el fondo centrado y el DIV centrado no se alinean juntos. .

Esto sólo sucede en FF.

¿Alguien sabe de una solución alternativa?

¿Fue útil?

Solución

Sí, es un problema conocido.Desafortunadamente, solo puede corregir el ancho de la imagen y el div, o usar un script para cambiar dinámicamente la propiedad stye.backgroundPosition.Otro truco consiste en poner expresión a la definición de clase CSS.

Otros consejos

Descubrí que al hacer que la imagen de fondo tenga un número impar de píxeles de ancho, el problema desaparece para Firefox.

Configuración de relleno: 0px 0px 0px 1px;soluciona el problema para IE.

Carlo Capocasa, Juegos de Traviano

El problema (más) común es que su imagen de fondo tiene un número impar mientras que su contenedor es un número par.He escrito un artículo en mi mejor inglés donde también explico cómo el navegador posicionó tu imagen: compruébalo aquí.

Pude resolver esto con jQuery:

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

Yo tuve el mismo problema.

Para obtener el fondo centrado, necesitas tener un imagen de fondo más ancha que la ventana gráfica.Intenta usar un fondo 2500px ancho.Obligará al navegador a centrar la parte de la imagen que se puede ver.

Déjame saber si te funciona.

¿Qué tal crear un div contenedor con la misma imagen de fondo?

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; }

El envoltorio tiene un número par, el fondo mantendrá la misma posición en cualquier tamaño de pantalla.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top