¡Oye! Este artículo es bastante antiguo. Lo revisamos aquí, que incluye mucha mejor información.
La introducción de la nueva Foros de CSS-Tricks ¡Los últimos días han sido geniales! Le preocupaba que tardaría un poco en ponerse al día, pero en los últimos días ha habido alrededor de 150 publicaciones en muchos temas geniales.
Uno de esos grandes temas fue el desafío de fondo de John Steven:
Estoy frente a un desafío y porque para celebrar este nuevo foro, me gustaría pedirles que me inspiren en este tema. Necesitamos un fondo 100% ancho, pero con un patrón diferente en el 50% de la pantalla. La idea de hacer una imagen de fondo que tenga, por ejemplo, 2500 px de ancho y repetición no es lo que estoy buscando.
Mi primer pensamiento fue crear 2 divs, un leftHalf y un rightHalf:
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}Esto funciona, pero tiene un problema “pequeño” (literalmente). Cuando la ventana del navegador tiene un ancho de un número impar de píxeles, no hay una división del 50% de ese número y se obtiene una pequeña franja blanca en el medio entre los dos divs.
El mismo John sugirió el ajuste perfecto a esta solución, que resuelve eso. En lugar de leftHalf, simplemente aplique esa imagen de fondo a todo el elemento del cuerpo. ¡Esto resuelve el problema de las rayas blancas y también usa menos marcado!
Ver demostración
(sí, el patrón de la mitad izquierda no se alinea del todo bien, ¡pero es la teoría aquí la que cuenta!)