Tentando obter um plano de fundo em uma página "dividida em duas"; duas cores em lados opostos (aparentemente, definindo um padrão background-colorna bodymarca e depois aplicando outra em uma divque estenda toda a largura da janela).

Eu vim com uma solução, mas infelizmente a background-sizepropriedade não funciona no IE7 / 8, que é essencial para este projeto -

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

Como são apenas cores sólidas, talvez exista uma maneira de usar apenas a background-colorpropriedade regular ?

Suporte a navegadores antigos

Se o suporte a navegadores mais antigos é obrigatório, então você não pode usar vários planos de fundo ou gradientes, provavelmente vai querer fazer algo assim em um divelemento sobressalente :

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

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

A solução usa uma div extra fixa que preenche metade da tela. Como é fixo, ele permanecerá na posição mesmo quando os usuários rolarem. Você pode ter que mexer com alguns índices z depois, para garantir que seus outros elementos estejam acima da div de segundo plano, mas não deve ser muito complexo.

Se você tiver problemas, verifique se o restante do conteúdo tem um índice z maior que o elemento background e você deve estar pronto.

Navegadores modernos

Se os navegadores mais recentes são sua única preocupação, existem alguns outros métodos que você pode usar:

Gradiente linear:

Esta é definitivamente a solução mais fácil. Você pode usar um gradiente linear na propriedade background do corpo para uma variedade de efeitos.

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

Isso causa um corte rígido de 50% para cada cor, portanto, não há um "gradiente" como o nome indica. Tente experimentar a peça "50%" do estilo para ver os diferentes efeitos que você pode alcançar.

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

Vários fundos com tamanho de fundo:

Você pode aplicar uma cor de plano de fundo ao htmlelemento e, em seguida, aplicar uma imagem de plano de fundo ao bodyelemento e usar a background-sizepropriedade para defini-la como 50% da largura da página. Isso resulta em um efeito semelhante, mas só seria realmente usado em gradientes se você estiver usando uma imagem ou duas.

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

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

NOTA EXTRA: Observe que os elementos htmle bodysão definidos height: 100%nos últimos exemplos. Isso é para garantir que, mesmo que seu conteúdo seja menor que a página, o plano de fundo seja pelo menos a altura da janela de exibição do usuário. Sem a altura explícita, o efeito de plano de fundo será reduzido apenas no conteúdo da página. Também é apenas uma boa prática em geral.

Solução simples para obter o fundo "dividido em dois":

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

Você também pode usar graus como direção

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

Você pode fazer uma distinção difícil em vez de gradiente linear colocando a segunda cor em 0%

Por exemplo,

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

Distinção difícil - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Portanto, esta é uma pergunta muito antiga que já tem uma resposta aceita, mas acredito que essa resposta teria sido escolhida se tivesse sido publicada há quatro anos.

Eu resolvi isso puramente com CSS e sem elementos de DOM EXTRA! Isso significa que as duas cores são puramente isso, apenas as cores de fundo de UM ELEMENTO, não a cor de fundo de duas.

Usei um gradiente e, como ajusto as cores para ficarem tão próximas, parece que as cores são distintas e que elas não se misturam.

Aqui está o gradiente na sintaxe nativa:

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

A cor #74ABDDcomeça em 0%e ainda está #74ABDDem 49.9%.

Então, forço o gradiente a mudar para a próxima cor dentro 0.2%da altura dos elementos, criando o que parece ser uma linha muito sólida entre as duas cores.

Aqui está o resultado:

E aqui está o meu JSFiddle!

Diverta-se!

isso deve funcionar com css puro.

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

testado apenas no Chrome.

Em um projeto anterior que tinha que oferecer suporte ao IE8 +, consegui isso usando uma imagem codificada no formato de URL de dados.

A imagem tinha 2800x1px, metade da imagem em branco e metade transparente. Funcionou muito bem.

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

Você pode vê-lo trabalhando aqui JsFiddle . Espero que possa ajudar alguém;)

Eu usei :aftere está funcionando em todos os principais navegadores. por favor verifique o link. só precisa ter cuidado com o índice z, pois depois está tendo posição absoluta.

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

ligação violino

Você pode usar o :afterpseudo-seletor para conseguir isso, embora eu não tenha certeza da compatibilidade com versões anteriores desse seletor.

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

Eu usei isso para ter dois gradientes diferentes em um plano de fundo da página.

Use na sua imagem bg

Divisão vertical

background-size: 50% 100%

Divisão horizontal

background-size: 100% 50%

Exemplo

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

Uma das maneiras de implementar seu problema e inserir uma única linha dentro de sua div:

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

Aqui está um código de demonstração e mais opções (horizontal, diagonal etc.), você pode clicar em "Executar trecho de código" para vê-lo ao vivo.

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

A opção mais à prova de balas e semanticamente correta seria usar pseudoelemento de posição fixa ( ::afterou ::before). Usando esta técnica, não se esqueça de definir os z-indexelementos dentro do contêiner. Lembre-se também de que a content:""regra para o pseudoelemento é necessária, caso contrário não será renderizada.

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

Exemplo ao vivo: https://jsfiddle.net/xraymutation/pwz7t6we/16/

Este é um exemplo que funcionará na maioria dos navegadores.
Basicamente, você usa duas cores de plano de fundo, a primeira começando de 0% e terminando em 50% e a segunda começando de 51% e terminando em 100%

Estou usando a orientação horizontal:

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

Para diferentes ajustes, você pode usar http://www.colorzilla.com/gradient-editor/

se você deseja usar linear-gradientcom 50% de altura:

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