Foros del Web » Creando para Internet » CSS »

dos colores en el body

Estas en el tema de dos colores en el body en el foro de CSS en Foros del Web. quiero dividir mi body de modo a que un 30% tenga un color en la parte de arriba, y el resto el 70% abajo que ...
  #1 (permalink)  
Antiguo 27/12/2014, 12:08
 
Fecha de Ingreso: junio-2014
Mensajes: 36
Antigüedad: 9 años, 3 meses
Puntos: 0
dos colores en el body

quiero dividir mi body de modo a que un 30% tenga un color en la parte de arriba, y el resto el 70% abajo que tenga otro color, y que ocupe el ancho 100% de la pantalla.

Tengo la etiqueta body y dentro un contenedor donde pongo todo, pero si pongo un div ahi dentro ese div toma el tamaño del contenedor (max-widht: 1200px) y yo quiero que esos colores ocupen lo que seria todo el body, pero dividido en dos colores..uno arriba y otro abajo

espero haberme explicado, no consigo hacerlo de las maneras que intento
  #2 (permalink)  
Antiguo 27/12/2014, 13:19
Avatar de GekoDH  
Fecha de Ingreso: diciembre-2014
Ubicación: Ourense
Mensajes: 58
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: dos colores en el body

A mí sólo se me ocurre darle al body un background hecho con un gradiente.

Algo así:

background: linear-gradient(top, #d60c42 30%, #9dd53a 30%, #80c217 30%, #a1d54f 30%);

Lo generé con esta herramienta: http://www.colorzilla.com/gradient-editor/

Espero que te sirva.
  #3 (permalink)  
Antiguo 27/12/2014, 15:51
(Desactivado)
 
Fecha de Ingreso: enero-2013
Mensajes: 289
Antigüedad: 10 años, 8 meses
Puntos: 10
Respuesta: dos colores en el body

http://jsfiddle.net/darronz/g1nvgj10/
  #4 (permalink)  
Antiguo 27/12/2014, 21:55
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años
Puntos: 39
Respuesta: dos colores en el body

Código CSS:
Ver original
  1. body
  2. {
  3. background: linear-gradient(to bottom, #aebcbf 0%,#aebcbf 30%,#0a0e0a 31%,#0a0809 100%);
  4. } /* W3C */
__________________
velarde23.com - Soluciones Web
  #5 (permalink)  
Antiguo 28/12/2014, 18:46
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 10 años, 4 meses
Puntos: 31
Respuesta: dos colores en el body

¿Y qué es lo que tienes?

El problema con body lo tienes en su alto que por defecto es auto, vienendo a ser el alto de su contenido.

Por cierto para el gradiente no hace falta dar tantas veces los colores, con esto basta:
Código CSS:
Ver original
  1. background: linear-gradient(#bbb 30%, #333 30% );
  #6 (permalink)  
Antiguo 03/01/2015, 15:05
 
Fecha de Ingreso: julio-2014
Ubicación: Barcelona
Mensajes: 20
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: dos colores en el body

A mi solo se me ocurre que metas dos div, uno con un 70% del body y otro del 30%. Eso si, el corte de colores será fuera de todo el contenido. Luego juega con el padding para ajustarlo a tu gusto.

También cabe decir que el corte de color se verá mucho, si eso no lo quieres mejor lo que te han dicho, color con gradient.

Saludos!

Etiquetas: html, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:12.