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

Question

tratando de lograr un fondo en una página que está "dividida en dos"; dos colores en lados opuestos (aparentemente realizados estableciendo un valor predeterminado background-color en la etiqueta body, luego aplicando otro en un div que se extiende por todo el ancho de la ventana).

Yo he venido para arriba con una solución, pero por desgracia la propiedad background-size no funciona en Internet Explorer 7/8, que es una necesidad para este proyecto -

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

Dado que se trata sólo de colores sólidos tal vez hay una manera usando solo la propiedad normal background-color?

Answer 1

Soporte

anteriores del navegador

Si es mayor soporte de los navegadores es una necesidad, por lo que no puede ir con múltiples orígenes o degradados, lo que probablemente va a querer hacer algo así en un elemento de recambio div:

#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 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 resto 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 nuevos navegadores son su única preocupación, hay un par de otros métodos que se pueden utilizar:

Gradiente Lineal:

Esta es sin duda 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 provoca un corte duro en 50% para cada color, por lo que no es un "gradiente" como el nombre implica. Intente experimentar con la parte del estilo "50%" para ver los diferentes efectos que puede lograr.

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

varios fondos con el fondo de tamaño:

Se puede aplicar un color de fondo para el elemento html, y luego aplicar una imagen de fondo para el elemento body y utilizar el background-size propiedad para establecerlo al 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/

---

EXTRA NOTA: en cuenta que tanto las html y body elementos se fijan a 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.

Answer 2

esto debería funcionar con pure css.

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

probado en solo Chrome.

Answer 3

solución simple para lograr la "partida en dos" background:

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

También puede utilizar grados como la dirección

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

Answer 4

En un proyecto pasado que tuvo que soportar IE8 + y yo alcanzado esta usando una imagen codificada en formato de url de datos.

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

Se puede ver trabajando aquí JsFiddle. Espero que pueda ayudar a alguien;)

Answer 5

Este es un ejemplo que funcionará en la mayoría de los navegadores.
Básicamente se utilizan dos colores de fondo, la primera de ellas a partir de 0% y terminando en el 50% y el segundo a partir de 51% y terminando en 100%

estoy usando la 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 se puede utilizar http://www.colorzilla.com/gradient-editor/

Answer 6

podría utilizar el selector de pseudo-:after para lograr esto, aunque estoy seguro de la compatibilidad con versiones anteriores de que el 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 un fondo de página.

Answer 7

uso de su imagen bg

vertical divide

background-size: 50% 100% 

dividida horizontalmente

background-size: 100% 50% 

Ejemplo

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

Answer 8

He usado :after y está trabajando en todos los navegadores. por favor revisa el enlace. Solo hay que tener cuidado con el índice Z ya que después de tener 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; 
     } 

fiddle link

Answer 9

Por lo tanto, esta es una muy vieja pregunta que ya tiene una respuesta aceptada, pero creo que esta respuesta habría sido elegido 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 gradiente y, debido a que configuré las paradas de color tan juntas, parece que los colores son distintos y que no se mezclan.

Aquí es el gradiente en la sintaxis nativa:

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

color #74ABDD comienza en 0% y todavía está en #74ABDD49.9%.

Luego, fuerzo el degradado para cambiar a mi siguiente color dentro de 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 here's my JSFiddle!

Que se diviertan!

Answer 10

Se puede hacer una distinción duro en lugar de gradiente lineal poniendo el segundo color a 0%

Por ejemplo,

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

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

Answer 11

Uno de la forma 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>

Answer 12

El más a prueba de balas y la opción semánticamente correcta sería utilizar posicionado fijo pseudo-elemento (:after o :before). Usando esta técnica, no olvides configurar z-index en elementos dentro del contenedor. También tenga en cuenta que la regla content:"" para pseudo-elemento es necesaria, de lo contrario no se procesará.

#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 vivo: https://jsfiddle.net/xraymutation/pwz7t6we/16/