toda - CSS: la imagen de fondo no se llena cuando se desplaza
insertar imagen css (8)
trabajando en un sitio muy pequeño que se carga de una sola vez, así que hay un div que contiene todas las imágenes de fondo, y además de eso (es decir, un índice z más alto ) hay un div de contenido que contiene todo. Puedo cambiar fondos fácilmente en función del contenido seleccionado.
Desafortunadamente, noté que si se inicia en una ventana pequeña para que aparezcan las barras de desplazamiento, si se desplaza no hay imagen de fondo en las partes ''reveladas'' de la página. :-(
Estructura de la página:
<body>
<div id="bg">
<div class="bgone"></div>
<div class="bgtwo"></div>
</div>
<div id="container">
<!-- content panels here -->
</div>
</body>
css:
#bg
{
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 1024px;
z-index:1;
}
.bgone
{
margin: 0px;
position: absolute;
width:100%;
height: 1024px;
background-image:url(../images/one.jpg);
background-position:top;
background-repeat:repeat-x;
z-index:2;
}
.bgtwo
{
margin: 0px;
position: absolute;
width:100%;
height: 1024px;
background-image:url(../images/two.jpg);
background-position:top;
background-repeat:repeat-x;
z-index:3;
}
#container
{
position:relative;
width:900px;
padding:0px;
margin:0px auto;
height:600px;
z-index:10;
}
En mi caso, la solución fue establecer una altura y / o un ancho fijos al div en cuestión.
La respuesta está aquí:
En resumen, estaba haciendo las cosas demasiado complicadas . La solución fue:
- elimine los divs que contienen imágenes bg; tendría que establecer las dimensiones al 100% solo para ver el img bg, pero eso solo sería el 100% del área / ventana visible, que no se vuelve a calcular cuando se desplaza.
- aplique cualquier imagen bg directamente al elemento del cuerpo porque sus dimensiones no están restringidas al tamaño inicial de la ventana gráfica
y en mi caso (utilizando múltiples imágenes bg):
crear estilos css separados para cada imagen bg, luego
use jquery para aplicarlos al cuerpo, por ejemplo, $ (body) .addClass ("specialbg"); etc
Me gustaría añadir a la sugerencia de Steg de "eliminar el ''ancho: 100%'' de los fondos y reemplazarlo por un ''ancho mínimo: 900px''", diciendo que no debe eliminar el ancho: 100%, sino simplemente agregar un min-ancho. De lo contrario, si el ancho es mayor que el ancho mínimo, algunos navegadores pueden no repetirlo más allá del ancho mínimo.
Solo una nota, si tiene la altura establecida en el elemento primario / elemento, también podría romper la imagen.
Por ejemplo, la mayoría de la gente usa esto en su código
body {
height: 100%; //avoid it
}
Tuve el mismo problema y es molesto. El problema para mí fue que no podía cambiar el HTML, solo el CSS, por lo que no podía eliminar los divs adicionales.
El problema que veo es que los fondos tienen "ancho: 100%" y el contenedor tiene "ancho: 900 px". Entonces, por ejemplo, si la ventana del navegador tiene un ancho de 800 px, los fondos se configuran en 800 px y, por lo tanto, cuando se desplaza la ventana horizontalmente, se obtienen las áreas sin fondo.
Otra forma de solucionar el problema es eliminar el "ancho: 100%" de los fondos y reemplazarlo por un "ancho mínimo: 900 px", lo que obliga a los fondos a tener siempre el mismo ancho que el contenedor. Cuando el tamaño de la ventana es inferior a 900 px, los fondos siempre se mantienen al mismo nivel que el contenedor. Trabaja un capricho.
Tuve este problema y lo solucioné con:
html {
background-image: url(''http://www.standardbrand.com/media/1237/home.jpg'');
}
body{
color: white;
background: transparent;
}
<!DOCTYPE html>
<html>
<body>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>
Usando background-repeat:repeat-x solo te dará una fila de la imagen de fondo repetida en la parte superior. Si eliminas esa propiedad CSS por completo, generará un mosaico de la imagen de fondo tanto horizontal como verticalmente, lo que parece que es lo que quieres. A menos que sus imágenes de fondo tengan 1024 píxeles de alto, no llenarán el div contenido.
Yo tuve el mismo problema. esto arreglado por overflow-x: scroll;
top:0px; bottom: 0px;
height: 100%;
background-repeat: repeat;
position: absolute;
overflow-x: scroll;