Foros del Web » Creando para Internet » CSS »

Background-image: se puede poner más de una imagen?

Estas en el tema de Background-image: se puede poner más de una imagen? en el foro de CSS en Foros del Web. Soy bastante nuevo en esto del CSS, hasta hace cuatro días diseñaba mi web utilizando tablas y otro tipo de chapuzas. Y en la transición ...
  #1 (permalink)  
Antiguo 28/08/2005, 13:02
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.776
Antigüedad: 19 años, 8 meses
Puntos: 76
Background-image: se puede poner más de una imagen?

Soy bastante nuevo en esto del CSS, hasta hace cuatro días diseñaba mi web utilizando tablas y otro tipo de chapuzas. Y en la transición al CSS, aunque estoy descubriendo auténticas maravillas, me encuentro con algunos obstáculos que no soy capaz de saltar.

Hoy me he atascado con las imágenes de fondo. Tengo un bloque de texto al que he puesto de fondo un color plano, y en el borde izquierdo como fondo una imagen JPG que es un gradiente horizontal. Para poner ese fondo he utilizado este código CSS:

background-color: #ddc;
background-image: url(fondo2.jpg);
background-repeat: repeat-y;

Ha quedado tal y como yo quería, pero ahora quería añadir otro toque visual. Fijaos en esta página, en la esquina inferior derecha. He conseguido un efecto de vuelta de hoja colocando esta imagen:



Y para ello he usado este código:

background: #b1c3ca url(azul.jpg) bottom right no-repeat;

Bien, la cuestión es que me gustaría añadir esa imagen de fondo en la esquina inferior derecha del bloque de texto que he indicado antes, pero como ya lleva una imagen de fondo en el borde izquierdo, no puedo añadir una nueva imagen de fondo. O al menos no he acertado cómo hacerlo. Alguien conoce el modo de poner más de una imagen de fondo en un mismo bloque de texto? O no es posible?

Muchas gracias por vuestras respuestas.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable

Última edición por -Defero-; 28/08/2005 a las 13:28
  #2 (permalink)  
Antiguo 30/08/2005, 08:01
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.776
Antigüedad: 19 años, 8 meses
Puntos: 76
No quiero ser pesado, pero aún no he solucionado mi duda, y el tema está a punto de pasar a la segunda página, donde nadie lo verá jamás. Un saludo.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #3 (permalink)  
Antiguo 30/08/2005, 09:00
Avatar de codigoflecha  
Fecha de Ingreso: noviembre-2004
Mensajes: 325
Antigüedad: 19 años, 4 meses
Puntos: 3
Cita:
Fijaos en esta página
se abre la página pero no se ve completa o por lo menos la esquina inferior derecha.
Tal vez podrias probar a colocar una capa donde quieres poner la imagen de fondo y jugar con los niveles con z-index.
no estoy seguro de que sea lo que quieres
un saludo
  #4 (permalink)  
Antiguo 30/08/2005, 09:31
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola:

He mirado la página y no encontré nada sobre el tema (no me he fijado a fondo), pero te diré que no es posible... pero puedes superponer una capa con fondo transparente y otra imagen (cosa de estilos)

body {background: url(izquierda.jpg) repeat-y left;]
#capa {background: transparent url(derecha.jpg) repeat-y right; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%;}

... y la página más o menos así:

<body>
<div id="capa">
...
</div>
</body>

Recuerdo haber hecho algo parecido en alguna ocasión, y me parece que funciona bien.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 30/08/2005, 09:39
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Qué tal Defero,

así a ojo yo diría que tienes dos opciones, usar un contenedor que contenga al contenedor actual; el primero tiene un fondo y el segundo tiene otro

Algo así

<div id="contenido">
<div id="contenidob">

</div>
</div>

en donde

#contenido{
background-color: #ddc;
background-image: url(fondo2.jpg);
background-repeat: repeat-y;
}

y

#contenidob{
background: url(azul.jpg) bottom right no-repeat;
}

Otra forma sería lo que te sugiere codigoflecha. Crea una capa de posición absoluta y las medidas exactas de la imagen de la esquina y aplícale por imagen de fondo la imagen de la esquina y lo posicionas en bottom: 0 y right: 0. Eso sí, deberás crear la capa dentro del div "contenido" y a este asignarle un posicionamiento de tipo relativo.

Un saludo
  #6 (permalink)  
Antiguo 30/08/2005, 09:40
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
oño cuando comencé a escribir no estaba la respuesta de caricatos (hola pepe )
  #7 (permalink)  
Antiguo 30/08/2005, 09:56
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Cita:
Iniciado por tunait
oño cuando comencé a escribir no estaba la respuesta de caricatos (hola pepe )
Hola Helena:

Me adelanté en otro "caso misterioso" de otro foro (me viene una especie de nostalgia de otros tiempos)

Un abrazo
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 30/08/2005, 13:06
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.776
Antigüedad: 19 años, 8 meses
Puntos: 76
Muchas gracias por vuestras respuestas. Después de leer vuestras soluciones parece evidente.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #9 (permalink)  
Antiguo 01/09/2005, 14:32
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 5 meses
Puntos: 45
Abri un tema de superposicion de fondos, porque tenia un problema.

En IE no funcionó.

http://www.forosdelweb.com/f53/superponer-dos-fondos-328726/#post1235878
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
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 08:08.