18 votos

CSS: imagen de fondo no se llene cuando el desplazamiento

trabajando en un pequeño sitio en el que se carga de una sola vez, así que hay un div que contiene todas las imágenes de fondo, y encima de eso (es decir, mayor z-index) hay un div de contenido que tiene de todo. Puedo cambiar los fondos fácilmente basada en lo que el contenido seleccionado.

Por desgracia, me di cuenta de si usted lance en una pequeña ventana, de modo que aparece una barra de desplazamiento, si se desplaza no hay ninguna imagen de fondo en el 'revelado' partes de la página. :-(

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

22voto

Steg Puntos 4835

Yo tenía el mismo problema y es molesto. El problema para mí es que yo no podía cambiar el HTML, sólo el CSS, así que yo no podía y quitar el adicional de divs.

El problema que yo veo es que los fondos han "width: 100%" y el contenedor tiene "width: 900px". Así, por ejemplo, si la ventana del navegador es de 800px de ancho, los fondos se establecen a 800px y, por lo tanto, cuando se desplaza horizontalmente de la ventana, usted consigue las áreas sin el fondo.

Otra forma de solucionar el problema es quitar el "width: 100%" de los fondos y reemplazarlo con una "min-width: 900px", lo que obliga a los fondos a ser siempre al menos el mismo ancho que el contenedor. Cuando el tamaño de la ventana se convierte en menos de 900px, los fondos de permanecer siempre en el mismo con el contenedor. Funciona de maravilla.

3voto

rekindleMyLoveOf Puntos 155

Aquí está la respuesta:

http://bytes.com/topic/html-css/answers/577902-background-image-getting-cut-off-outside-original-window-display

En resumen, yo estaba haciendo las cosas demasiado complicadas. La solución fue:

  1. deshacerse de los divs que mantenga bg las imágenes - que tendría para establecer dimensiones 100% solo para ver la bg img, pero que sólo sería 100% de la zona visible / viewport, lo que no se vuelven a calcular cuando se de desplazamiento.
  2. aplicar cualquier bg imágenes directamente a el elemento del cuerpo debido a su las dimensiones no están restringidos a la tamaño inicial de la ventanilla

y en mi caso (utilizando múltiples bg imágenes):

  1. crear distintos estilos css para cada bg imagen, a continuación,

  2. el uso de jquery para aplicarlos a la cuerpo - por ejemplo, $(cuerpo).addClass("specialbg"); etc

1voto

vsaraco Puntos 193

En mi caso la solución fue poner a la altura fija y/o el ancho del div en cuestión.

1voto

neil1967 Puntos 62

Me gustaría añadir a Steg la sugerencia de "quitar el 'width: 100%" de los fondos y reemplazarlo con una "min-width: 900px'," diciendo que no se debe quitar width: 100%, pero simplemente agregar un min-width. De lo contrario, si la anchura es mayor que el min-width, puede que algunos navegadores no lo repita más allá de la min-width.

1voto

carillonator Puntos 2836

El uso de background-repeat:repeat-x sólo le dará una fila de la imagen de fondo repetida a lo largo de la parte superior. Si usted quita que la propiedad de CSS en total, se mosaico de la imagen de fondo, tanto horizontal como verticalmente, lo que suena es lo que quieres. A menos que sus imágenes de fondo son de 1024px de alta, no van a llenar el div contenedor.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: