Colore di sfondo diverso su entrambi i lati della pagina

Voglio creare un layout a larghezza fissa in cui il colore di sfondo su entrambi i lati della pagina è diverso, ma con i colori di sfondo che si estendono all'infinito da entrambi i lati della pagina, indipendentemente dalla distanza rimpicciolireColore di sfondo diverso su entrambi i lati della pagina

Ad esempio, non sto cercando di creare un'immagine di 9000 x 10 px con i colori corretti su entrambi i lati e di affiancarlo, in quanto ciò funzionerebbe solo se non si rimpicciolisce abbastanza da vedere il bordo dell'immagine di sfondo.

È possibile?

Grazie!

Edit:

avrei specificato, il fondo dovrebbe coprire l'intera altezza della pagina, non solo l'altezza della finestra/finestra.

fonte

2011-01-18 Jesse

non mi piaceva la soluzione height: 100%; position: fixed; perché volevo per lasciare aperta l'opzione di avere un'immagine di sfondo che scorreva con la pagina in seguito. (Anche se non ho pensato a questo nello scrivere la domanda.) Ho avuto un gioco e ho trovato min-height: 100%; al lavoro.

<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>

Per qualche ragione non funziona in jsfiddle.net: http://jsfiddle.net/HktPN/ Ma lo fa nel mio browser.

fonte

2011-01-20 11:04:43 Jesse

Come va? http://jsfiddle.net/PNYVe/

fonte

2011-01-18 09:52:36

Se il contenuto è di grandi dimensioni e viene visualizzato lo scorrimento verticale, lo sfondo non si estenderà fino alla fine. esempio: http://jsfiddle.net/dan86/PNYVe/2/ – Dan

Ah, quello che Dan ha detto. Ne ho bisogno anch'io. :/ – Jesse

Basta cambiare da 'absolute' a' fixed'. Sembra funzionare in questo modo. http://jsfiddle.net/JzTdF/ –

utilizzando Matt esempio, solo l'aggiunta di un contenitore risolve esso: http://jsfiddle.net/PNYVe/3/

fonte

2011-01-18 10:29:55 NicolaPasqui

Questo risolve il problema di avere troppi contenuti. Ma prova a cancellare alcuni dei contenuti, lo sfondo si ridurrà alle dimensioni del contenuto e non riempirà l'intera pagina xD – Dan

This sembra funzionare:

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

fonte

2011-01-18 10:31:14

Questo sembra funzionare, ma dovresti notare che 'position: fixed' non è supportato in IE6 – Dan

Questo ha un problema in cui è possibile vedere '1px' dello sfondo viola dove dovrebbe essere giallo. (dipende se il numero di pixel della larghezza della vista è pari o dispari) (test in Chrome) – thirtydot

Se avessi un nickel per ogni volta che ho letto "... non è supportato in IE6" ... –

Questo funziona in IE7 + sia poco e molti contenuti:

Live Demo (un sacco di contenuti)
Live Demo (poco contenuto)

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 
}

fonte

2011-01-18 10:47:53 thirtydot

Colore di sfondo diverso su entrambi i lati della pagina

risposta

Problemi correlati