Imagen de fondo no se extiende a ancho de página completa

En this page, tengo un fondo de 2 tonos. La estructura de la página es:Imagen de fondo no se extiende a ancho de página completa

<body> 
    <div id="upbg"/> 
    <div id="container"/> 
</body

Este fondo se consigue añadiendo una imagen de fondo oscuro para upbg y una imagen de fondo más claro en el cuerpo. El CSS para upbg es:

#upbg { 
    background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0; 
    height: 275px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

Si realiza la ventana del navegador muy estrecha de tal manera que las barras de desplazamiento aparecen, a continuación, si se desplaza hacia la derecha se dará cuenta de que la imagen de fondo de upbg no llena la totalidad ancho de la página.

Supongo que esto se debe a que 'ancho: 100%' significa el ancho de la ventana del navegador, en lugar de todo el ancho de la página, ¿hay alguna manera de arreglar esto?

Gracias, Don

Fuente

2009-03-14 Dónal

Mi conjetura es que esto se debe a 'width: 100%', el ancho de la ventana navegador, en lugar de toda la ancho de la página, hay una forma de arreglar esto?

100% significa que va a ser tan ancho como el elemento padre se posiciona en relación con (en este caso, body, la anchura de los cuales se basa en la anchura de su padre, html). Que será tan ancho como la ventana del navegador, a menos que especifique lo contrario.

El problema es, usted tiene otro hijo de body que puede ser más ancha que body: tanto #container y #footer presentan un estilo de tal manera que siempre serán al menos 1026px amplia. Esto no amplía sus elementos principales, ya que ya hemos establecido que serán tan amplios como la ventana del navegador; en cambio, ellos desbordan sus padres. La respuesta predeterminada a esto es mostrar barras de desplazamiento para que pueda desplazarse y ver el contenido desbordado; si agregó el estilo overflow:hidden a html o body, encontrará su contenido y pie de página recortados al tamaño de la ventana del navegador, y no se mostrarán las barras de desplazamiento.

Hay un par de soluciones fáciles a esto: #content

Wrap y #footer en #upbg en lugar de las precede con él. A continuación, elimine los estilos existentes y configúrelos de la siguiente manera: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; Esto logra dos cosas: ya no especifica un ancho para #upbg, lo que permite que se ensanche lo suficiente para encerrar a sus nuevos hijos, y le permite deshacerse de de un montón de estilo ahora innecesario (también querrás borrar el relleno que has configurado para body, junto con un poco de estilo en #content). Alternativamente,
Deshágase del ancho mínimo en #content y #footer, para que no se desborden.

Fuente

2009-03-14 03:55:04 Shog9

¡Gran respuesta, muchas gracias! Solo una pregunta, si la primera línea de su respuesta dice: "100% significa que será tan ancho como el elemento principal en el que se encuentra relevante. En este caso, * cuerpo *." –

Uh, sí. Me equivoqué un poco en la última edición ... corregida. – Shog9

simplemente puede usar una imagen de posición absoluta con ancho & altura ajustada al 100% envuelta con la etiqueta del cuerpo, si pudiera usar un fondo completo. establece el índice z de otros elementos más arriba que la imagen de fondo considerada.

 

<head> 
    ... 
    <style> 
    .virtualBg{ 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     z-index: 0; 
    } 
    </style> 
</head> 
<body> 
    <img src="path/to/bg.jpg" class="virtualBg" /> 
    ... 
</body>

pero me recomiendan usar una imagen recortada verticalmente que contiene tanto los tonos de color y luego repetir-x el fondo para el elemento del cuerpo.

Fuente

2009-03-14 06:12:21 sepehr

Imagen de fondo no se extiende a ancho de página completa

Respuesta

Cuestiones relacionadas