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

Je veux créer une mise en page à largeur d'où la couleur d'arrière-plan sur chaque côté de la page est différent, mais avec les couleurs d'arrière-plan s'étendant à l'infini de part et d'autre de la page, peu importe à quel point vous effectuer un zoom arrière.

Par exemple, je ne cherche pas à créer un 9000x10 px image avec les bonnes couleurs sur les deux côtés et le carrelage, cela ne fonctionne que si vous n'avez pas de zoom assez loin pour voir le bord de l'image d'arrière-plan.

Est-ce possible?

Merci!

Edit:

Je devrais avez spécifié, l'arrière-plan doit couvrir la totalité de la hauteur de la page, pas juste à la hauteur de la fenêtre/fenêtre d'affichage.

OriginalL'auteur Jesse | 2011-01-18

  1. 6

    Cette 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;
}
    Cela semble fonctionner, mais vous devriez noter que position:fixed n'est pas pris en charge dans IE6
    Cela a un problème dans lequel vous pouvez voir 1px du fond mauve où il doit être de couleur jaune. (dépend de la largeur de la fenêtre d'affichage nombre de pixels est pair ou impair) (test dans google Chrome)
    Si j'avais un nickel pour chaque fois que j'ai lu "...n'est pas pris en charge dans IE6"...
    Qui semble être corrigé maintenant.
    Je sais que le texte est un mauvais moyen pour le sarcasme, mais "bon ami" presque m'a fait snort café.

    OriginalL'auteur Fred Nurk

  2. 3

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

    Démo (beaucoup de contenu)

    Démo (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
}

    OriginalL'auteur thirtydot

  3. 1

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

    si le contenu est grande, et la verticale de défilement s'affiche, le fond n'aura pas l'étirer à la fin. exemple: jsfiddle.net/dan86/PNYVe/2
    Ah, ce que Dan a dit. J'ai besoin de ça aussi. :/
    Il suffit de changer de absolute à fixed. Il semble que cela fonctionne de cette façon. jsfiddle.net/JzTdF

    OriginalL'auteur Matt Asbury

  4. 1

    Je n'aimais pas le height: 100%; position: fixed; solution parce que je voulais quitter la possibilité d'avoir une image de fond qui défile avec la page plus tard. (Bien que je ne pense pas que cela dans l'écriture de la question.) J'ai eu un jeu et trouvé min-height: 100%; de travail.

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

    OriginalL'auteur Jesse

  5. 0

    à l'aide de Matt exemple, juste l'ajout d'un conteneur elle n'en résout :
    http://jsfiddle.net/PNYVe/3/

    Cela résout le problème d'avoir trop de contenu. Mais essayez de supprimer une partie du contenu, le fond sera réduite à la taille du contenu, et ne pas remplir la page entière xD

    OriginalL'auteur NicolaPasqui