Tres fondos distintos para una misma div . .

[lbenz]

Gente, se que se puede hacer, porque en algun momento, en algun lugar lo he visto, perooooooooooo, uno ve cosas cuando no las necesita, y cuando si, no las encuentra . .

la idea es la siguiente, yo tengo una div general en la cual por un tema de estética, necesito a esa misma div ponerle 3 fondos distintos, dos de imagenes y uno de background color...

la idea seria la siguiente

#tres_fondos {
width: 300px;
padding:0;
margin:0;
background: url(bg_arriba.jpg);
background-color:#FF0000;
background: url(bg_abajo.jpg);
}

la idea seria que quede como la siguiente imagen, o sea, creo que lo que faltaria es el codigo del repeat y demas variables para el estilo . . . la idea que la primera imagen de fondo se posicione en la parte superior y o se repita, luego se muestre el color de fondo y la imagen bg_abajo se posicione abajo y no se repita . . .

espero puedan ayudarme, desde ya muchas gracias

[jomaruro]

Hola:

Poner más de un fondo a un div no se puede, deberás dividir el div en tres y a cada uno de ellos ponerle el background que necesites.

Saludos.

[Calizman]

Saludos!

Añadiendo una idea a la de Jomaruro: Podrías hacer un solo fondo de 3 colores y hacerlo en una sola imagen. Seguramente eso funcionará!

Hasta Luego!

PD: Teníamos tiempo sin toparnos en un hilo Jomaruro! Que la pases bien!

[forwebblr]

Otra opción es dividirlo en dos partes, arriba la imagen y el color de fondo, cuando la imagen acabe se verá el color de fondo.

En la parte inferior el segundo div con la segunda imagen de fondo.

Es casi lo mismo pero ahorras un div.. que estamos en crisis.

[alexk]

Iniciado por jomaruro

Hola:

Poner más de un fondo a un div no se puede, deberás dividir el div en tres y a cada uno de ellos ponerle el background que necesites.

Saludos.

se puede pero con CSS3

Código CSS:

.fondito{background:url(img/fondito_top.jpg) 50% 0 repeat-x, url(img/fondito_fot.jpg) 50% 100% repeat-x;}
 

pero bueno yo usaria 2 divs para ello... como te indica forwebblr.

[lbenz]

alexk, y como puedo aplicar esto que me decis a lo que yo quiero hacer . .

ongamosles que quiero que la imagen top tenga 50px de alto, el medio me quede del color de fondo y la imagen de abajo otros 50 opx de alto . . .

otra cosa, que diferencia hay entre css3 y el 2 que estoy usando, o sea, se peuden conjugar en una misma hoja de estilos o se complica ?

[jomaruro]

Hola:

Iniciado por lbenz

otra cosa, que diferencia hay entre css3 y el 2 que estoy usando, o sea, se peuden conjugar en una misma hoja de estilos o se complica ?

El CSS 3 es un proyecto de futuro, es decir el 2.1 mejorado, todavía no está aprobado definitivamente ¿consecuencia? Muchas de las novedades no funcionan en todos los navegadores, sobre todo en la familia IE.

Saludos.

[alexk]

lbenz
como bien te indica jomauro... esa y otras propiedades CSS3 te serviran en los ultimos navegadores tan solo y no en todos...
igual lo que tu quieres no es posible... almenos solo con CSS... si quieres una imagen de 50px de alto sera mejor que la edites con photoshop u otro software...
de poder se podria de alguna manera, pero no seria crossbrowser... la respuesta la tienes en el #4