Foros del Web » Creando para Internet » CSS »

Tres fondos distintos para una misma div . .

Estas en el tema de Tres fondos distintos para una misma div . . en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/07/2010, 15:21
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 9 meses
Puntos: 4
Tres fondos distintos para una misma div . .

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

__________________
que fea firma que tenia... prefiero tener esto
  #2 (permalink)  
Antiguo 05/07/2010, 17:04
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Tres fondos distintos para una misma div . .

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.

  #3 (permalink)  
Antiguo 06/07/2010, 01:52
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Tres fondos distintos para una misma div . .

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 06/07/2010, 03:00
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: Tres fondos distintos para una misma div . .

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.
  #5 (permalink)  
Antiguo 06/07/2010, 08:03
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Tres fondos distintos para una misma div . .

Cita:
Iniciado por jomaruro Ver Mensaje
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:
Ver original
  1. .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.
  #6 (permalink)  
Antiguo 06/07/2010, 12:11
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Tres fondos distintos para una misma div . .

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 ?
__________________
que fea firma que tenia... prefiero tener esto
  #7 (permalink)  
Antiguo 06/07/2010, 15:21
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Tres fondos distintos para una misma div . .

Hola:

Cita:
Iniciado por lbenz Ver Mensaje
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.

  #8 (permalink)  
Antiguo 06/07/2010, 15:39
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Tres fondos distintos para una misma div . .

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

Etiquetas: distintos, tres, fondo
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 23:54.