Intentar lograr un fondo en una página que se "divida en dos"; dos colores en lados opuestos (aparentemente hecho estableciendo un valor predeterminado background-coloren la bodyetiqueta, luego aplicando otro en una divque se extiende por todo el ancho de la ventana).

Se me ocurrió una solución, pero desafortunadamente la background-sizepropiedad no funciona en IE7 / 8, que es imprescindible para este proyecto.

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

Dado que se trata solo de colores sólidos, ¿tal vez hay una manera de usar solo la background-colorpropiedad regular ?

Soporte de navegador antiguo

Si la compatibilidad con el navegador anterior es imprescindible, por lo que no puede utilizar múltiples fondos o gradientes, es probable que desee hacer algo como esto en un divelemento adicional :

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

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

La solución utiliza un div fijo adicional que llena la mitad de la pantalla. Como está arreglado, permanecerá en posición incluso cuando los usuarios se desplacen. Es posible que tenga que jugar con algunos índices z más tarde, para asegurarse de que sus otros elementos estén por encima del div de fondo, pero no debería ser demasiado complejo.

Si tiene problemas, solo asegúrese de que el resto de su contenido tenga un índice z más alto que el elemento de fondo y que esté listo para comenzar.

Navegadores modernos

Si los navegadores más nuevos son su única preocupación, existen otros métodos que puede usar:

Gradiente lineal:

Esta es definitivamente la solución más fácil. Puede usar un degradado lineal en la propiedad de fondo del cuerpo para una variedad de efectos.

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

Esto provoca un corte duro al 50% para cada color, por lo que no hay un "gradiente" como su nombre lo indica. Intente experimentar con la pieza "50%" del estilo para ver los diferentes efectos que puede lograr.

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

Múltiples fondos con tamaño de fondo:

Puede aplicar un color de fondo al htmlelemento, y luego aplicar una imagen de fondo al bodyelemento y usar la background-sizepropiedad para establecerlo en el 50% del ancho de la página. Esto da como resultado un efecto similar, aunque en realidad solo se usaría sobre gradientes si está utilizando una o dos imágenes.

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

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

NOTA ADICIONAL: Observe que los elementos htmly bodyestán configurados height: 100%en los últimos ejemplos. Esto es para asegurarse de que, incluso si su contenido es más pequeño que la página, el fondo tendrá al menos la altura de la vista del usuario. Sin la altura explícita, el efecto de fondo solo se reducirá hasta el contenido de su página. También es solo una buena práctica en general.

Solución simple para lograr el fondo "dividido en dos":

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

También puedes usar grados como dirección

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

Puede hacer una distinción difícil en lugar de un degradado lineal poniendo el segundo color a 0%

Por ejemplo,

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

Distinción dura - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Entonces, esta es una pregunta muy antigua que ya tiene una respuesta aceptada, pero creo que esta respuesta habría sido elegida si se hubiera publicado hace cuatro años.

¡Resolví esto puramente con CSS y SIN ELEMENTOS DE DOM EXTRA! Esto significa que los dos colores son puramente eso, solo colores de fondo de UN ELEMENTO, no el color de fondo de dos.

Utilicé un degradado y, debido a que configuré el color se detiene tan estrechamente, parece que los colores son distintos y no se mezclan.

Aquí está el gradiente en la sintaxis nativa:

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

El color #74ABDDcomienza en 0%y todavía está #74ABDDen49.9% .

Luego, fuerzo el gradiente para cambiar a mi próximo color dentro 0.2% de la altura de los elementos, creando lo que parece ser una línea muy sólida entre los dos colores.

Aquí está el resultado:

Y aquí está mi JSFiddle!

¡Que te diviertas!

Esto debería funcionar con CSS puro.

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

probado solo en Chrome.

En un proyecto anterior que tenía que soportar IE8 + y lo logré usando una imagen codificada en formato de URL de datos.

La imagen era 2800x1px, la mitad de la imagen blanca y la otra mitad transparente. Funcionó bastante bien.

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

Puedes verlo trabajando aquí JsFiddle . Espero que pueda ayudar a alguien;)

Lo he usado :aftery funciona en todos los principales navegadores. por favor revise el enlace. solo hay que tener cuidado con el índice z ya que después está teniendo posición 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;
        }

enlace de violín

Podrías usar el :afterpseudo-selector para lograr esto, aunque no estoy seguro de la compatibilidad con ese selector.

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

He usado esto para tener dos gradientes diferentes en el fondo de una página.

Usar en tu imagen bg

División vertical

background-size: 50% 100%

División horizontal

background-size: 100% 50%

Ejemplo

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

Una de las formas de implementar su problema para ingresar una sola línea dentro de su div:

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

Aquí hay un código de demostración y más opciones (horizontal, diagonal, etc.), puede hacer clic en "Ejecutar fragmento de código" para verlo en 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>

La opción más a prueba de balas y semánticamente correcta sería utilizar un pseudo-elemento ( ::aftero ::before) de posición fija . Con esta técnica, no olvide establecer z-indexelementos dentro del contenedor. También content:""tenga en cuenta que se necesita esa regla para el pseudo-elemento, de lo contrario no se representará.

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

Ejemplo en vivo: https://jsfiddle.net/xraymutation/pwz7t6we/16/

Este es un ejemplo que funcionará en la mayoría de los navegadores.
Básicamente, utiliza dos colores de fondo, el primero comienza en 0% y termina en 50% y el segundo comienza en 51% y termina en 100%

Estoy usando orientación 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, puede usar http://www.colorzilla.com/gradient-editor/

si quieres usar linear-gradientcon 50% de altura:

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