Centro de fondo con chrome (error)

Tengo una imagen de fondo centrada en que las pantallas de Chrome se compensan en un píxel.Centro de fondo con chrome (error)

CSS

#container { 
    background: url("images/header.jpg") no-repeat scroll 50% transparent; 
    width: 100% 
} 
#header { 
    width: 986px; 
    margin: 100px auto 0 auto; 
}

HTML

<html> 
<body> 
    <div id="container"> 
     <div id="header">centered content</div> 
    </div> 
</body> 
</html>

supongo que tiene que ver con cómo los diferentes navegadores manejar la center50% -o - propiedad del background en CSS:

enter image description here

¿Hay algún método conocido (simple) alternativo para solucionarlo? El contenedor de fondo tiene que es 100% ancho.

Fuente

2011-06-23 Naoise Golden

Para mí, esto hizo el truco:

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html { 
    margin-left: 1px; 
} 

}

Voy a publicar el enlace de este solución tan pronto como descubrí que la obtuve hace unos días. En la misma publicación, el tipo dijo que el problema era con un número par o impar para el ancho del contenedor. De todos modos, esto solucionó el problema en mi caso.

Fuente

2011-07-05 22:08:42 ronaldosantana

limpio! la consulta de medios es la clave, pero en mi caso el código era: '@media screen y (-webkit-min-device-pixel-ratio: 0) {#container {background-position: 49.9% top; }} '(cambie la respuesta si puede) –

¿La imagen es en realidad 986px? La forma más fácil que encontré para solucionarlo es asegurarme de que el ancho de la imagen sea un número par.

Otra cosa que podría hacer es agregar un búfer de 2px (para mantener el ancho un número par) en la imagen de fondo para dar cuenta de ese cambio. No debe cambiar su imagen como se ve en el navegador, siempre y cuando se agregue un px a cada lado para mantenerlo todo parejo.

Fuente

2011-06-23 12:42:08 Shauna

gracias por su respuesta. El fondo es 986px, pero no entiendo cómo hacerlo funcionaría ... luego parecería desequilibrado en otros navegadores que ahora lo renderizan correctamente. Además, ¿podría explicarme acerca de agregar un 2px _buffer_? Gracias –

@Naoise: en mi experiencia, no afecta a los otros navegadores si agrega o elimina un píxel para que el ancho sea un número par. Lo que quiero decir con agregar un "búfer" es agregar un píxel en cada lado de la imagen (por lo que es 988 px de ancho, en lugar de 986 px de ancho) que continúa la imagen (para que la esquina curvada continúe hacia abajo y el lado gris se extienda un pixel). Mantenga el div en 986px, por lo que los otros navegadores cortarán la imagen donde sea necesario. – Shauna

Intente cambiar el tamaño del navegador para ver cómo funciona ... estamos hablando de píxeles aquí, y si la ventana tiene un ancho par está bien, de lo contrario, un píxel debe perderse en algún lugar, supongo.

Fuente

2011-06-23 12:42:52

, sí, el cambio de tamaño hace que se ajuste correctamente algunas veces ... pero la mayoría de las veces está fuera de balance. Esto se debe a cómo Chrome calcula los decimales en píxeles ... Esperaba algún arreglo conocido. –

¿Qué tal un 99% o puede intentar 99.9999% tal vez. –

Supongo que la imagen de fondo también tiene 986 píxeles de ancho? Entonces, este efecto también debería ser visible en el lado izquierdo, sin embargo, dado la vuelta.

me sugieren para eliminar la imagen de fondo del envase y añadirlo a la cabecera:

#container { 
    width: 100%; 
} 
#header { 
    width: 986px; 
    background: url("images/header.jpg") no-repeat scroll 50% transparent; 
    margin: 100px auto 0 auto; 
}

Fuente

2011-06-23 12:46:43 NGLN

contenedor de fondo tiene que ser 100% ancho, por lo tanto, no puede entrar en '# header' –

@Naoise Golden Si la imagen de fondo tiene 986 píxeles de ancho, puede agregarla centrada en el encabezado. Editaré mi respuesta para aclarar. – NGLN

Si puede generar una imagen más ancha que la ventana del navegador, eso debería arreglarlo.

Si encuentra que la solución aquí - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/

Fuente

2011-07-10 21:25:51 sevik

Si realiza la imagen de fondo ancho de un número impar (987px) el posicionamiento será consistente a través de todos los navegadores. Parece contrario a la intuición, pero parece que siempre soluciona el problema sin ningún tipo de pirateo de CSS.

Fuente

2012-07-24 00:44:48 Demian

¡Esto funcionó muy bien para mí! Gracias, Demian. –

Utilicé el siguiente bit de CSS para solucionar el problema en webkit.Si JS no está activado, funciona en el supuesto de que el navegador será probablemente pantalla completa, por lo que el ancho de la ventana gráfica en WebKit será un número impar

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html { 
     margin-left: 1px; 
    } 
    html.evenWidth { 
     margin-left: 0px; 
    } 
}

Javascript (jQuery)

$(document).ready(function { 
var oWindow = $(window), 
htmlEl = $('html'); 

function window_width() { 
    if(oWindow.width() % 2 == 0) { 
     htmlEl.addClass('evenWidth'); 
    } else { 
     htmlEl.removeClass('evenWidth'); 
    } 
} 

$(document).ready(function(){ 
    window_width(); 
    $(window).resize(window_width); 
});

Fuente

2013-02-26 16:11:26

Respuesta

Cuestiones relacionadas