Color degradado en Joomla

crivadron · #1 (**permalink**) 20/10/2006, 16:23

Saludos

Necesito poner en color degradado en el fondo del body, osea, en la prte superior un color azul oscuro hasta un azul claro en el pie del cuerpo de la parte del mosMainBody.

El inconveniente que no hago con una imagen es por que si tengo una imagen de 15X300 y mi body llega a pasar a unos 420px, se me repetira y quedara feo... o alguna alternativa para que la imagen creca con el cuerpo de la pagina web

PSIONIC · #2 (**permalink**) 20/10/2006, 19:11

Puedes hacer una imagen degradada de 10 de ancho por 500 de alto con el degradado de arriba hacia abajo y con CSS le pones el siguiente código:

Código:

 
.cuerpo {
 background-image: url(../images/degradado.png);
 background-repeat: no-repeat;
}

Saludos!!

astromario · #3 (**permalink**) 26/10/2006, 22:24

También algo que me ha funcionado es crear esta misma imagen en Fireworks o Photoshop y luego duplicarla formando un espejo, de tal manera que el resultado sea que cuando la página tenga que bajar lo suficiente, empieza arriba en tu azul oscuro y va degradándose hasta azul claro, luego continúa el "espejo" de esta imagen desde el mismo azul claro hasta llegar a un azul oscuro.

Puede ser una alternativa... Saludos

crivadron · #4 (**permalink**) 27/10/2006, 10:20

gracias a todos por la ayuda
Pero un pregunta astromario, como haces lo del espejo?????
Me podrias dar una mejor ayuda en eso????

T_O_N_N_Y · #5 (**permalink**) 27/10/2006, 11:04

Cita:

Iniciado por crivadron

gracias a todos por la ayuda
Pero un pregunta astromario, como haces lo del espejo?????
Me podrias dar una mejor ayuda en eso????

En photoshop será tan fácil como:
1-Abre tu imagen de, pongamos, 10x500px con el degradado elegido.
2-Ves al menu Imagen/Tamaño del Lienzo, y deberás cambiarla por 10x1000px.
3-Seleccionas el degradado que ya tienes hecho, lo duplicas y pulsas Control+T, le das un giro de 180º y lo pones que encaje en la imagen.

Nada más.

Saludos ;)

PD: yo utilizo la forma parecida a la de PSIONIC.
Te la pongo ;)

Código:

 
.cuerpo {
	background: #XXXXXX url("../images/bgtextarea.gif") repeat-x;
}

Siendo #XXXXXX el color de bajo del todo de tu degradado, y con el "repeat-x" lo que conseguimos es que solo se repita en el eje X, por tanto no se verá el horroroso efecto si la web es más larga que la altura del degradado.

Suerte ;)