Couleur de fond différente de chaque côté de la page

Je souhaite créer une mise en page à largeur fixe dont la couleur d'arrière-plan de chaque côté de la page est différente, mais avec des couleurs d'arrière-plan infinies de chaque côté de la page. Dézoomer. Par exemple, je ne cherche pas à créer une image px de 9000 x 10 avec les couleurs correctes de chaque côté et en mosaïque, car cela ne fonctionnerait que si vous ne zoomez pas assez loin pour voir le bord de l'image d'arrière-plan.Couleur de fond différente de chaque côté de la page

Est-ce possible?

Merci!

Edit:

j'aurais indiqué, l'arrière-plan doit couvrir toute la hauteur de la page, non seulement la hauteur de la fenêtre/fenêtre.

Source

2011-01-18 Jesse

Je n'aimais pas la solution height: 100%; position: fixed; parce que je voulais pour laisser l'option ouverte d'avoir une image de fond qui a défilé avec la page plus tard. (Bien que je n'ai pas pensé à cela en écrivant la question.) J'ai eu une pièce de théâtre et j'ai trouvé min-height: 100%; pour travailler.

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

Pour une raison quelconque, il ne fonctionne pas dans jsfiddle.net: http://jsfiddle.net/HktPN/ Mais il le fait dans mon navigateur.

Source

2011-01-20 11:04:43 Jesse

Comment est-ce pour vous? http://jsfiddle.net/PNYVe/

Source

2011-01-18 09:52:36

Si le contenu est volumineux et que le défilement vertical apparaît, l'arrière-plan ne s'étire pas jusqu'à la fin. exemple: http://jsfiddle.net/dan86/PNYVe/2/ – Dan

Ah, ce que Dan a dit. J'ai besoin de ça aussi. :/ – Jesse

Il suffit de passer de 'absolute' à' fixed'. Cela semble fonctionner de cette façon. http://jsfiddle.net/JzTdF/ –

en utilisant par exemple Matt, ajoutant simplement un conteneur résout: http://jsfiddle.net/PNYVe/3/

Source

2011-01-18 10:29:55 NicolaPasqui

Cela résout le problème d'avoir trop de contenu. Mais essayez de supprimer certains contenus, l'arrière-plan rétrécira à la taille du contenu et ne remplira pas toute la page xD – Dan

This semble fonctionner:

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

Source

2011-01-18 10:31:14

Cela semble fonctionner, mais vous devriez noter que 'position: fixed' n'est pas supporté dans IE6 – Dan

Cela a un problème où vous pouvez voir '1px' du fond violet où il devrait y avoir jaune. (dépend si le nombre de pixels de la fenêtre d'affichage est pair ou impair) (test dans Chrome) – thirtydot

Si j'avais un nickel pour chaque fois que j'ai lu "... n'est pas supporté dans IE6" ... –

Cela fonctionne dans IE7 + à la fois peu et beaucoup de contenu:

Live Demo (beaucoup de contenu)
Live Demo (peu de contenu)

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 
}

Source

2011-01-18 10:47:53 thirtydot

Couleur de fond différente de chaque côté de la page

Répondre

Questions connexes