Sobre esta página, tengo un 2-tono de fondo. La estructura de la página es:

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

Este fondo se logra mediante la adición de una oscura imagen de fondo para upbg y un fondo más claro de la imagen 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 usted hacer que la ventana del navegador muy estrecho tales que aparece una barra de desplazamiento, a continuación, si usted se desplaza a través de a la derecha verás que la imagen de fondo de upbg no llenar todo el ancho de la página.

Mi conjetura es que esto es porque ‘width: 100%” significa que el ancho de la ventana del navegador, en lugar de todo el ancho de la página, hay una manera de solucionar este problema?

Gracias,
No

OriginalEl autor Dónal | 2009-03-14

2 Comentarios

  1. 8

    Mi conjetura es que esto es debido a que
    ‘width: 100%” significa que el ancho de la
    la ventana del navegador, en lugar de toda la
    el ancho de la página, hay una manera de
    solucionar este problema?

    100% significa que va a ser tan amplia como el elemento primario se sitúa en relación a (en este caso, body, el ancho de las cuales estarán en función de la anchura de su padre, html). Que va a ser tan amplia como la ventana del navegador, a menos que se especifique lo contrario.

    El problema es que tiene otro hijo de body que pueden ser más anchas que body: tanto #container y #footer son de estilo tal que siempre lo serán, al menos, 1026px de ancho. Esto no ampliar sus elementos primarios, como ya hemos establecido que los va a ser tan amplia como la ventana del navegador; en su lugar, desbordamiento sus padres. La respuesta predeterminada es mostrar barras de desplazamiento para que pueda desplazarse y ver el desborde de contenido, si se añade el estilo overflow:hidden a html o body, que iba a encontrar su contenido y pie de página recortada al tamaño de la ventana del navegador, y no hay barras de desplazamiento se muestran.

    Hay un par de soluciones fáciles a este:

    1. Envoltura de #contenido #y pie de página en #upbg en lugar de antes de ellos. A continuación, retire los estilos existentes, y el estilo de la siguiente manera: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; de Esta forma se logran dos cosas: no puede especificar un ancho de #upbg, permitiendo que se convierta en lo suficientemente amplia como para encerrar a sus nuevos hijos, y que le permite deshacerse de un montón de ahora innecesario estilo (usted querrá borrar el relleno que se ha fijado para body así, junto con un poco de estilo en #content). Alternativamente,
    2. Deshacerse de la anchura mínima en #content y #footer, para que no se desborde.
    Gran respuesta, muchas gracias! Sólo una pregunta, si la primera línea de la respuesta de leer: “100% significa que va a ser tan amplia como el elemento primario se coloca pertinentes. En este caso, cuerpo.”
    Uh, sí. Yo un poco jodido que la última edición… corregido.

    OriginalEl autor Shog9

  2. 1

    simplemente puede utilizar una absoluta coloca la imagen con ancho & altura se ajusta al 100%, envuelto con el cuerpo tagk, si se puede usar un conjunto de fondo.
    establecer el z-index de otros elementos más alto que el fondo considera la imagen.

    
     <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 recomiendo el uso de un verticalmente recortada de la imagen que contiene los tonos de color y, a continuación, repeat-x, el fondo para el elemento body.

    OriginalEl autor sepehr

Dejar respuesta

Please enter your comment!
Please enter your name here