Backrground arriba, centro y pie distinto.

mariomon17 · #1 (**permalink**) 27/12/2009, 09:13

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 originaldiv {background: url(top.jpg) top no-repeat;
background: url(body.jpg) center repeat-y;
background: url(pie.jpg) bottom no-repeat

Gracias d antemano.

#2 (**permalink**) 27/12/2009, 09:23

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

jomaruro · #3 (**permalink**) 27/12/2009, 09:32

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.

memoadian · #4 (**permalink**) 27/12/2009, 11:15

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¡¡¡

mariomon17 · #5 (**permalink**) 27/12/2009, 12:09

Nose, pero realize algo asi pero con
backgroun: left y right
no recuerdo como era

mariomon17 · #6 (**permalink**) 31/12/2009, 09:17

Cita:

Iniciado por memoadian

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.

Esck21 · #7 (**permalink**) 31/12/2009, 12:51

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.

jomaruro · #8 (**permalink**) 31/12/2009, 13:37

Hola:

Cita:

Iniciado por Esck21

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.

mariomon17 · #9 (**permalink**) 01/01/2010, 09:15

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)

AhmedRugama · #10 (**permalink**) 01/01/2010, 11:41

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>