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.
