Foros del Web » Creando para Internet » CSS »

Backrground arriba, centro y pie distinto.

Estas en el tema de Backrground arriba, centro y pie distinto. en el foro de CSS en Foros del Web. Hola a tods, ¿como tengo que poner para que un div tenga un background arriba, otro el el pie y en el espacio del centro ...
  #1 (permalink)  
Antiguo 27/12/2009, 09:13
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 14 años, 4 meses
Puntos: 34
Backrground arriba, centro y pie distinto.

Hola a tods, ¿como tengo que poner para que un div tenga un background arriba, otro el el pie y en el espacio del centro se repita uno. He intentado asi, pero no funciona:
Código CSS:
Ver original
  1. div {background: url(top.jpg) top no-repeat;
  2. background: url(body.jpg) center repeat-y;
  3. background: url(pie.jpg) bottom no-repeat
Gracias d antemano.
  #2 (permalink)  
Antiguo 27/12/2009, 09:23
ginnomillan
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Backrground arriba, centro y pie distinto.

A ver,

Se me ocurren dos ideas,

1.- El mismo div dividirlo en tres, y en cada uno hacer las cosas por separado.
2.- Prediseñar el fondo en photoshop con las medidas adecuadas y sobre el fondo comenzar a distribuir los divs necesarios.

¿Te sirve?

Saludos

Ginno
  #3 (permalink)  
Antiguo 27/12/2009, 09:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Backrground arriba, centro y pie distinto.

Hola:

Tres background en un mismo div no es posible. Al menos con CSS 2.1, creo haber leído por algún lado que con CSS 3 existe alguna solución para eso pero con el inconveniente de que no todos los navegadores lo soportan todavía.

En principio me quedaría con alguna de las soluciones que te ha propuesto ginnomillan.

Saludos.

  #4 (permalink)  
Antiguo 27/12/2009, 11:15
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 9 meses
Puntos: 641
Respuesta: Backrground arriba, centro y pie distinto.

si lo mejor seria dividir el div mayor, y acomodarlos con un diseño de photoshop para que no se note, otra se me ocurre que el lo dejes como un solo div y el puro diseño divida, dependiendo si tienen medidas fijas o en porcentajes.

Offtopic,
¿por cierto cuando meten css3 ya como oficial? se viene hablando de él desde 2005 y aún nada. JO¡¡¡
  #5 (permalink)  
Antiguo 27/12/2009, 12:09
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Backrground arriba, centro y pie distinto.

Nose, pero realize algo asi pero con
backgroun: left y right
no recuerdo como era
  #6 (permalink)  
Antiguo 31/12/2009, 09:17
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Backrground arriba, centro y pie distinto.

Cita:
Iniciado por memoadian Ver Mensaje
si lo mejor seria dividir el div mayor, y acomodarlos con un diseño de photoshop para que no se note, otra se me ocurre que el lo dejes como un solo div y el puro diseño divida, dependiendo si tienen medidas fijas o en porcentajes.
Memoadian, t puedes explicar mejor. Gracias

El problema es que si utilizo tres div's, no podria hacer lo siguiente:
Yo quiero un div y dentro informacion e imagenes pero si hago tres divs no podria.

Me entendeis... con un div esta todo el espacio SIN DIVIDIR en el otro hay tres molestas divisiones.
  #7 (permalink)  
Antiguo 31/12/2009, 12:51
Avatar de Esck21  
Fecha de Ingreso: septiembre-2009
Mensajes: 50
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Backrground arriba, centro y pie distinto.

Dividelo en 3 divs :

div#div1: { width: 100%; height: 33%; background url('...'); }
div#div2: { width: 100%; height: 33%; background url('...'); }
div#div3: { width: 100%; height: 33%; background url('...'); }

No se le puede colocar 3 backgrounds a un mismo div.
  #8 (permalink)  
Antiguo 31/12/2009, 13:37
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Backrground arriba, centro y pie distinto.

Hola:

Cita:
Iniciado por Esck21 Ver Mensaje
Dividelo en 3 divs :
Pero está diciendo que dividido en tres no le vale, o sea, opción descartada.

Mariomon, creo que la mejor opción es la que te dieron al principio, junta la imagen de los tres backgrounds en uno solo y ponlo como background del div.

Saludos.

  #9 (permalink)  
Antiguo 01/01/2010, 09:15
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Backrground arriba, centro y pie distinto.

Claro pero el problema es que la extension del texto e imagenes puede variar, por eso quiero un backgrpund top fijo, un bottom fijo, y uno en el centro variable (que se repita y)
  #10 (permalink)  
Antiguo 01/01/2010, 11:41
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 15 años, 3 meses
Puntos: 6
Respuesta: Backrground arriba, centro y pie distinto.

Hola, pues no te va a salir tan facil, si crees que solo es usando top center o algo asi, estas opciones es para ubicar el fondo si, pero igual solo podes tener un fondo por div, lo que podes hacer es esto:

html,body{height:100%;}
body{width:800px; background: url(body.jpg) center repeat-y; width:100%; height:100%;}
#diva {background: url(top.jpg) top no-repeat; width:100%; height:100%;}
#divb{background: url(pie.jpg) bottom no-repeat width:100%; height:100%;}

<body>
<div id="diva">
<div id="divb">
</div>
</div>
</body>
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




La zona horaria es GMT -6. Ahora son las 03:06.