CSS: establece un color de fondo que es el 50% del ancho de la ventana

Intentando obtener un fondo en una página que está “dividida en dos”; dos colores en lados opuestos (aparentemente realizados estableciendo un background-color defecto en la etiqueta del body , luego aplicando otro en un div que se extiende por todo el ancho de la ventana).

Encontré una solución, pero lamentablemente la propiedad de background-size 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 de colores sólidos, ¿hay alguna forma de usar solo la propiedad habitual background-color ?

Mayor compatibilidad con navegadores

Si necesita una compatibilidad más antigua con el navegador, por lo que no puede ir con múltiples fondos o degradados, es probable que desee hacer algo como esto en un elemento div repuesto:

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

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

La solución usa un div fijo adicional que ocupa la mitad de la pantalla. Como está fijo, permanecerá en su posición incluso cuando los usuarios se desplacen. Puede que tengas que jugar con algunos índices z más adelante, para asegurarte de que tus otros 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 rest de su contenido tenga un índice Z más alto que el elemento de fondo y debería estar listo para continuar.


Navegadores modernos

Si los navegadores más recientes 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 gradiente 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 causa un corte duro al 50% para cada color, por lo que no hay un “degradado” como su nombre lo indica. Intente experimentar con la parte del estilo “50%” para ver los diferentes efectos que puede lograr.

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

Múltiples fondos con fondo de tamaño:

Puede aplicar un color de fondo al elemento html y, a continuación, aplicar una imagen de fondo al elemento del body y usar la propiedad de background-size para establecerlo en un 50% del ancho de la página. Esto da como resultado un efecto similar, aunque en realidad solo se usaría sobre degradados si usa 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: Tenga en cuenta que tanto los elementos html como body están configurados en 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 será al menos el alto de la ventana gráfica del usuario. Sin la altura explícita, el efecto de fondo solo disminuirá en cuanto al contenido de su página. También es solo una buena práctica en general.

Solución simple para lograr el fondo “dividir 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%); 

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 ser compatible con IE8 +, logré esto usando una imagen codificada en formato de url de datos.

La imagen era 2800x1px, la mitad de la imagen era blanca y la 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;)

Entonces, esta es una pregunta terriblemente vieja que ya tiene una respuesta aceptada, pero creo que esta respuesta habría sido elegida si hubiera sido publicada hace cuatro años.

¡Lo resolví puramente con CSS y sin NINGÚN ELEMENTO 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 gradiente y, debido a que establecí el color se detiene tan cerca, parece que los colores son distintos y que no se mezclan.

Aquí está el degradado en syntax nativa:

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

Color #74ABDD comienza en 0% y sigue siendo #74ABDD en 49.9% .

Luego, fuerzo el gradiente para cambiar a mi siguiente color en 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:

Color de fondo dividido

¡Y aquí está mi JSFiddle!

¡Que te diviertas!

Puede hacer una distinción difícil en lugar de degradado lineal al poner el segundo color en 0%

Por ejemplo,

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

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

He usado :after y está funcionando en todos los principales navegadores. por favor revisa el enlace. Solo hay que tener cuidado con el índice Z ya que después de tener posición absoluta.

 
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.
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,
` 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; }

violín

Puede usar el selector :after pseudo-selector para lograr esto, aunque no estoy seguro de la compatibilidad con versiones anteriores de ese selector.

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

Lo he usado para tener dos degradados diferentes en un fondo de página.

La opción más a prueba de balas y semánticamente correcta sería usar un pseudo-elemento de posición fija ( :after o :before ). Usando esta técnica, no olvides configurar z-index para los elementos dentro del contenedor. También importa, esa regla de content:"" para pseudo-elemento es necesaria, de lo contrario no se renderizará.

 #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/

Úselo en su 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 tu problema para ingresar una sola línea dentro de tu 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: 
Horizonal:
Diagonal:

Este es un ejemplo que funcionará en la mayoría de los navegadores.
Básicamente utilizas dos colores de fondo, el primero comenzando desde el 0% y terminando al 50% y el segundo desde el 51% y terminando al 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/