Foros del Web » Creando para Internet » CSS »

Imagen/Mosaico de background con degradadado

Estas en el tema de Imagen/Mosaico de background con degradadado en el foro de CSS en Foros del Web. Hola gente! Tengo un reto que conseguir Me explico, tengo la típica imagen de fondo de pantalla que se repite tanto a lo ancho como ...
  #1 (permalink)  
Antiguo 01/10/2009, 15:58
Avatar de renton  
Fecha de Ingreso: enero-2004
Ubicación: BCN (PPCC)
Mensajes: 573
Antigüedad: 20 años, 2 meses
Puntos: 1
Imagen/Mosaico de background con degradadado

Hola gente!
Tengo un reto que conseguir
Me explico, tengo la típica imagen de fondo de pantalla que se repite tanto a lo ancho como a lo alto (a modo mosaico).
La idea seria crear un degradado en esta imagen "de oscuro a claro" y "de fuera hacia dentro".
Es decir, ambos laterales de la pantalla deben ser oscuros y, entonces, degradar a claro a medida que se acerca al centro de la pantalla.

No puedo crear el efecto degradado mediante photoshop encima de la imagen de fondo, porque esta es un simple cuadrado que se repite hasta la saciedad, tanto a lo ancho como a lo alto.

Así pues, no encuentro la forma através de css de generar esta peculiar degradacion. He encontrado alguna funcion javascript, pero son lentas y no acaban de funcionar.

¿Qué opción creéis que puede ser la correcta para solucionar este problemilla?

Gracias y un saludo!!
__________________
"No et limites a contemplar aquestes hores que ara venen, baixa al carrer i participa.
No podran res davant un poble unit, alegre i combatiu!!"
  #2 (permalink)  
Antiguo 01/10/2009, 17:29
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 14 años, 11 meses
Puntos: 19
Respuesta: Imagen/Mosaico de background con degradadado

Hola! Puedes dar el background al body en mosaico como estas haciendo y luego crear dos divs que cada uno ocupe media pantalla que sacas del flujo dandoles posicion fija y a cada uno de estos darle un background png con degradado transparente. No se, se me acaba de ocurrir, cuestion de probar y jugar un rato, el inconveniente es que tendrás que hackear para ie por el problema de este con las transparencias png y que tienes que añadir dos divs no semánticos al código html.

¿Y no puedes crear el background con el degradado de manera que ocupe toda la pantalla a lo ancho y lo repitas verticalmente?

Salud!
  #3 (permalink)  
Antiguo 01/10/2009, 17:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Imagen/Mosaico de background con degradadado

body {background: #XXXZZZ url (mosaico.jpg) repeat-y center;}
La imagen del tamaño que necesites, teniendo en los laterales el color sólido y al centro el mosaico formado por la imagen repetida. La altura suficiente para crear el mosaico en la vertical.
#XXXZZZ sería el mismo color que el sólido utilizado en el primer px del color del degradado.

No veo demasiada dificultad, tanto a la hora de hacer la imagen con el evolutionado-paint como para colocarla de fondo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 01/10/2009, 17:50
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 14 años, 11 meses
Puntos: 19
Respuesta: Imagen/Mosaico de background con degradadado

Si señor, me había yo complicado la vida un poco. ¡Dios! ¡si es que no son horas!

Salud! kseso?
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:09.