Der Versuch, einen Hintergrund auf einer Seite zu erzielen, die "in zwei Teile geteilt" ist; zwei Farben auf gegenüberliegenden Seiten (scheinbar durch Festlegen einer Standardeinstellung background-colorfür das bodyTag und anschließendes Anwenden einer weiteren Farbe auf eine div, die sich über die gesamte Breite des Fensters erstreckt).

Ich habe eine Lösung gefunden, aber leider background-sizefunktioniert die Eigenschaft in IE7 / 8 nicht, was ein Muss für dieses Projekt ist -

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

Da es sich nur um Volltonfarben handelt, gibt es vielleicht eine Möglichkeit, nur die reguläre background-colorEigenschaft zu verwenden?

Unterstützung für ältere Browser

Wenn die Unterstützung älterer Browser ein Muss ist, sodass Sie nicht mit mehreren Hintergründen oder Verläufen arbeiten können, möchten Sie wahrscheinlich Folgendes für ein Ersatzelement tun div:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Beispiel: http://jsfiddle.net/PLfLW/1704/

Die Lösung verwendet ein zusätzliches festes Div, das den halben Bildschirm ausfüllt. Da es behoben ist, bleibt es in Position, auch wenn Ihre Benutzer scrollen. Möglicherweise müssen Sie später mit einigen Z-Indizes herumspielen, um sicherzustellen, dass sich Ihre anderen Elemente über dem Hintergrund-Div befinden, aber es sollte nicht zu komplex sein.

Wenn Sie Probleme haben, stellen Sie einfach sicher, dass der Rest Ihres Inhalts einen höheren Z-Index als das Hintergrundelement hat, und Sie sollten bereit sein.

Moderne Browser

Wenn neuere Browser Ihr einziges Problem sind, können Sie einige andere Methoden verwenden:

Linearer Gradient:

Dies ist definitiv die einfachste Lösung. Sie können einen linearen Farbverlauf in der Hintergrundeigenschaft des Körpers für eine Vielzahl von Effekten verwenden.

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

Dies führt zu einem harten Cutoff von 50% für jede Farbe, sodass es keinen "Farbverlauf" gibt, wie der Name schon sagt. Versuchen Sie, mit dem Teil "50%" des Stils zu experimentieren, um die verschiedenen Effekte zu sehen, die Sie erzielen können.

Beispiel: http://jsfiddle.net/v14m59pq/2/

Mehrere Hintergründe mit Hintergrundgröße:

Sie können eine Hintergrundfarbe auf das htmlElement anwenden, dann ein Hintergrundbild auf das bodyElement anwenden und die background-sizeEigenschaft verwenden, um es auf 50% der Seitenbreite festzulegen. Dies führt zu einem ähnlichen Effekt, der jedoch nur dann über Farbverläufe verwendet wird, wenn Sie zufällig ein oder zwei Bilder verwenden.

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Beispiel: http://jsfiddle.net/6vhshyxg/2/

ZUSÄTZLICHER HINWEIS: Beachten Sie, dass in den letzteren Beispielen sowohl das htmlals auch das bodyElement festgelegt sind height: 100%. Dies soll sicherstellen, dass der Hintergrund, selbst wenn Ihr Inhalt kleiner als die Seite ist, mindestens der Höhe des Ansichtsfensters des Benutzers entspricht. Ohne die explizite Höhe wird der Hintergrundeffekt nur bis zum Seiteninhalt verringert. Es ist auch nur eine gute Praxis im Allgemeinen.

Einfache Lösung, um einen "Split in Two" -Hintergrund zu erzielen:

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

Sie können auch Grad als Richtung verwenden

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

Sie können eine harte Unterscheidung anstelle eines linearen Verlaufs treffen, indem Sie die zweite Farbe auf 0% setzen.

Zum Beispiel,

Farbverlauf - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

Harte Unterscheidung - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Dies ist also eine schrecklich alte Frage, die bereits akzeptiert wurde, aber ich glaube, dass diese Antwort gewählt worden wäre, wenn sie vor vier Jahren veröffentlicht worden wäre.

Ich habe das rein mit CSS und ohne EXTRA DOM ELEMENTS gelöst! Dies bedeutet, dass die beiden Farben nur das sind, nur Hintergrundfarben von EINEM ELEMENT, nicht die Hintergrundfarbe von zwei.

Ich habe einen Farbverlauf verwendet und da ich die Farbstopps so eng beieinander eingestellt habe, sieht es so aus, als ob die Farben unterschiedlich sind und sich nicht mischen.

Hier ist der Gradient in der nativen Syntax:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

Farbe #74ABDDbeginnt bei 0%und ist immer noch #74ABDDbei 49.9%.

Dann zwinge ich den Farbverlauf, innerhalb 0.2%der Elementhöhe zu meiner nächsten Farbe zu wechseln , wodurch eine scheinbar sehr durchgezogene Linie zwischen den beiden Farben entsteht.

Hier ist das Ergebnis:

Und hier ist meine JSFiddle!

Habe Spaß!

Dies sollte mit reinem CSS funktionieren.

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

Nur in Chrome getestet.

In einem früheren Projekt, das IE8 + unterstützen musste, habe ich dies mit einem Bild erreicht, das im Daten-URL-Format codiert ist.

Das Bild war 2800 x 1 Pixel groß, die Hälfte des Bildes weiß und die Hälfte transparent. Hat ziemlich gut funktioniert.

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

Sie können sehen, dass es hier funktioniert JsFiddle . Hoffe es kann jemandem helfen;)

Ich habe verwendet :afterund es funktioniert in allen gängigen Browsern. Bitte überprüfen Sie den Link. Ich muss nur auf den Z-Index achten, da danach die Position absolut ist.

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

Geigenlink

Sie könnten den :afterPseudo-Selektor verwenden, um dies zu erreichen, obwohl ich mir nicht sicher bin, ob dieser Selektor abwärtskompatibel ist.

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

Ich habe dies verwendet, um zwei verschiedene Verläufe auf einem Seitenhintergrund zu haben.

Verwenden Sie auf Ihrem Bild bg

Vertikale Aufteilung

background-size: 50% 100%

Horizontale Aufteilung

background-size: 100% 50%

Beispiel

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

Eine Möglichkeit, Ihr Problem zu implementieren, um eine einzelne Zeile in Ihr div einzugeben:

background-image: linear-gradient(90deg, black 50%, blue 50%);

Hier ist ein Demonstrationscode und weitere Optionen (horizontal, diagonal usw.). Klicken Sie auf "Code-Snippet ausführen", um ihn live zu sehen.

.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

Die kugelsicherste und semantisch korrekteste Option wäre die Verwendung eines fest positionierten Pseudoelements ( ::afteroder ::before). Vergessen Sie bei dieser Technik nicht z-index, Elemente im Container festzulegen. Beachten Sie auch, dass diese content:""Regel für Pseudoelemente benötigt wird, da sie sonst nicht gerendert wird.

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

Live-Beispiel: https://jsfiddle.net/xraymutation/pwz7t6we/16/

Dies ist ein Beispiel, das in den meisten Browsern funktioniert.
Grundsätzlich verwenden Sie zwei Hintergrundfarben, die erste beginnt bei 0% und endet bei 50% und die zweite beginnt bei 51% und endet bei 100%

Ich verwende horizontale Ausrichtung:

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

Für verschiedene Anpassungen können Sie http://www.colorzilla.com/gradient-editor/ verwenden.

Wenn Sie linear-gradientmit 50% der Höhe verwenden möchten :

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;