Color de fondo diferente a ambos lados de la página

Quiero crear un diseño de ancho fijo donde el color de fondo en cada lado de la página sea diferente, pero con los colores de fondo extendiéndose infinitamente desde cualquier lado de la página sin importar qué tan lejos disminuir el zoom.Color de fondo diferente a ambos lados de la página

Por ejemplo, no estoy buscando crear una imagen de 9000x10 px con los colores correctos en cada lado y en mosaico, ya que esto solo funcionaría si no aleja lo suficiente para ver el borde de la imagen de fondo.

¿Esto es posible?

Gracias!

Editar:

debería haber especificado, el fondo debe cubrir toda la altura de la página, no sólo la altura de la ventana/ventana.

Fuente

2011-01-18 Jesse

no me gustó la solución height: 100%; position: fixed; porque quería para dejar la opción abierta de tener una imagen de fondo que se desplazó con la página más adelante. (Aunque no pensé en esto al escribir la pregunta.) Tuve una jugada y encontré min-height: 100%; para trabajar.

<html> 
    <head> 
     <style type="text/css"> 

      body { 
       padding: 0; 
       margin: 0; 
      } 

      #container { 
       width: 100%; 
       min-height: 100%; 
       position: relative; 
      } 

      #left, #right { 
       width: 50%; 
       height: 100%; 
       position: absolute; 
       z-index: -1; 
      } 

      #left { 
       left: 0; 
       background-color: navy; 
      } 

      #right { 
       right: 0; 
       background-color: maroon; 
      } 

      #content { 
       width: 512px; 
       height: 100%; 
       margin: 0 auto; 
       background-color: white; 
      } 

     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="left"></div> 
      <div id="right"></div> 
      <div id="content"> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
       Hi<br /> 
      </div> 
     </div> 
    </body> 
</html>

Por alguna razón no funciona en jsfiddle.net: http://jsfiddle.net/HktPN/ Pero lo hace en mi navegador.

Fuente

2011-01-20 11:04:43 Jesse

¿Cómo es esto para usted? http://jsfiddle.net/PNYVe/

Fuente

2011-01-18 09:52:36

si el contenido es grande y aparece el desplazamiento vertical, el fondo no se extenderá hasta el final. ejemplo: http://jsfiddle.net/dan86/PNYVe/2/ – Dan

Ah, lo que dijo Dan. Yo también necesito eso :/ – Jesse

Simplemente cambie de 'absolute' a' fixed'. Parece que funciona de esa manera. http://jsfiddle.net/JzTdF/ –

usando Matt ejemplo, sólo añadir un contenedor resuelve: http://jsfiddle.net/PNYVe/3/

Fuente

2011-01-18 10:29:55 NicolaPasqui

Esto resuelve el problema de tener demasiado contenido. Pero intente eliminar algunos de los contenidos, el fondo se reducirá al tamaño del contenido y no completará toda la página xD – Dan

This parece funcionar:

<body> 
<div id="bg-right"></div> 
<!-- rest of page --> 
</body>

body { 
    background-color: purple; 
} 
#bg-right { 
    background-color: yellow; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 50%; 
    right: 0; 
    z-index: -1; 
}

Fuente

2011-01-18 10:31:14

Esto parece funcionar, pero debe tener en cuenta que 'posición: fijo' no es compatible con IE6 – Dan

Esto tiene un problema donde puedes ver '1px' del fondo morado donde debería haber amarillo. (depende si el conteo de píxeles del ancho de la vista es par o impar) (probando en Chrome) – thirtydot

Si tuviera un centavo por cada vez que he leído "... no es compatible con IE6" ... –

Esto funciona en IE7 + tanto con poca y un montón de contenido:

Live Demo (un montón de contenido)
Live Demo (poco contenido)

HTML:

<div id="left"></div> 
<div id="right"></div> 
<div id="container"></div>

CSS:

html, body { 
    margin: 0; padding: 0; border: 0; 
} 
body { 
    background: #ccc 
} 
#left, #right { 
    position: fixed; 
    width: 50%; 
    height: 100%; 
    top: 0 
} 
#left { 
    background: #ccc; 
    left: 0 
} 
#right { 
    background: #999; 
    right: 0 
} 
#container { 
    background: #fff; 
    width: 80%; 
    margin: 0 auto; 
    position: relative 
}

Fuente

2011-01-18 10:47:53 thirtydot

Color de fondo diferente a ambos lados de la página

Respuesta

Cuestiones relacionadas