Proste rozwiązanie do osiągnięcia tła "split in two":

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

Możesz również używać stopni jako kierunku

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

To powinno działać z czystym css.

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

Testowane tylko w Chrome.

W poprzednim projekcie, który miał obsługiwać IE8+ i osiągnąłem to za pomocą obrazu zakodowanego w formacie data-url.

Obraz miał wymiary 2800x1px, połowa obrazu była biała, a połowa przezroczysta. Zadziałało całkiem nieźle.

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

Możesz zobaczyć to działa tutaj JsFiddle . Mam nadzieję, że komuś pomoże;)

Więc to jest strasznie stare pytanie, które ma już zaakceptowaną odpowiedź, ale wierzę, że ta odpowiedź zostałaby wybrana, gdyby została opublikowana cztery lata temu.

Rozwiązałem to czysto CSS i bez dodatkowych elementów DOM! Oznacza to, że dwa kolory są czysto, tylko kolory tła jednego elementu, a nie kolor tła dwóch.

Użyłem gradientu i ponieważ ustawiłem kolor tak blisko siebie, wygląda to tak, jakby kolory były różne i że nie mieszają się.

Oto gradient w natywnej składni:

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

Kolor #74ABDD zaczyna się od 0% i nadal jest #74ABDD na 49.9%.

Następnie wymuszam przesunięcie gradientu do następnego koloru w obrębie 0.2% wysokości elementów, tworząc coś, co wydaje się być bardzo solidną linią między tymi dwoma kolorami.

Oto wynik:

Oraz Oto Mój JSFiddle!

Można dokonać twardego rozróżnienia zamiast gradientu liniowego, umieszczając drugi kolor na 0%

Na przykład,

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

Trudne rozróżnienie - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Użyłem :after i działa we wszystkich głównych przeglądarkach. proszę sprawdzić link. wystarczy uważać na indeks z, ponieważ PO ma pozycję absolutną.

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

Fiddle link

Możesz użyć :after pseudo-selektora, aby to osiągnąć, choć nie jestem pewien wstecznej kompatybilności tego selektora.

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

Użyłem tego, aby mieć dwa różne gradienty na tle strony.

Najbardziej kuloodporną i poprawną semantycznie opcją byłoby użycie pseudoelementu o stałej pozycji (:after lub :before). Używając tej techniki nie zapomnij ustawić z-index na elementach wewnątrz kontenera. Należy również pamiętać, że reguła content:"" dla pseudo-elementu jest potrzebna, w przeciwnym razie nie zostanie renderowana.

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

Przykład na żywo: https://jsfiddle.net/xraymutation/pwz7t6we/16/

Użyj na swoim obrazku bg

Podział pionowy

background-size: 50% 100%

Podział poziomy

background-size: 100% 50%

Przykład

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

Jeden ze sposobów implementacji problemu, aby wprowadzić jedną linię wewnątrz div:

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

Tutaj jest kod demonstracyjny i więcej opcji (poziome, ukośne, itp.), możesz kliknąć "Uruchom fragment kodu", aby zobaczyć go na żywo.

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

Jest to przykład, który będzie działał na większości przeglądarek.
Zasadniczo używasz dwóch kolorów tła, pierwszy zaczyna się od 0% i kończy się na 50%, a drugi zaczyna się od 51% i kończy się na 100%

Używam orientacji poziomej:

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

Do różnych korekt można użyć http://www.colorzilla.com/gradient-editor/