CSS: establezca un color de fondo que sea el 50% del ancho de la ventana
Intentar conseguir un fondo en una página que esté "dividida en dos"; dos colores en lados opuestos (aparentemente hecho estableciendo un valor predeterminado background-coloren la bodyetiqueta y 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, lo cual 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, ¿quizás haya una manera de usar solo la background-colorpropiedad normal?
Compatibilidad con navegadores antiguos
Si es imprescindible la compatibilidad con navegadores antiguos, por lo que no puedes utilizar múltiples fondos o degradados, probablemente querrás hacer algo como esto en un divelemento de repuesto:
#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 ocupa la mitad de la pantalla. Como está arreglado, permanecerá en su posición incluso cuando los usuarios se desplacen. Es posible que tengas que juguetear con algunos índices z más adelante para asegurarte de que los demás elementos estén por encima del div de fondo, pero no debería ser demasiado complejo.
Si tiene problemas, simplemente asegúrese de que el resto de su contenido tenga un índice z más alto que el elemento de fondo y estará listo.
Navegadores modernos
Si su única preocupación son los navegadores más nuevos, existen algunos métodos más que puede utilizar:
Gradiente lineal:
Esta es definitivamente la solución más sencilla. Puede utilizar un degradado lineal en la propiedad de fondo del cuerpo para obtener diversos efectos.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Esto provoca un corte estricto al 50% para cada color, por lo que no hay un "degradado" como su nombre lo indica. Intente experimentar con la parte "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 degradados si estás usando una imagen o dos.
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 tanto los htmlelementos bodycomo están configurados height: 100%en los últimos ejemplos. Esto es para garantizar que incluso si su contenido es más pequeño que la página, el fondo tendrá al menos la altura de la ventana gráfica del usuario. Sin la altura explícita, el efecto de fondo sólo bajará hasta el contenido de su página. También es una buena práctica en general.
Solución simple para lograr un 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%);
