fondo degradado

[wolfmoon]

Intento hacer un fondo degradado, he leido mucho pero no me aclaro de como hacerlo para que ocupe toda la pantalla. No se si se puede hacer solamente con css, porque tambien lei que hay que hacerlo con php, no se, haber si me podeis explicar porque....

[arriaka]

Hola wolfmoon

La mejor maner que tienes de hacer un fondo degradado (suponiendo que quieres que se degrade de arriba a abajo), es hacer un gif de 1px de ancho y la altura necesaria (por ejemplo 500px).

El gif empezara desde arriba y tienes que tener en cuenta que color tendria en el borde inferio, para poner ese mismo color en el background.

Una vez que tengas el gif, tienes que poner el siguiente codigo css:

Código:

body{
	border: 0px;
	margin: 0px;
	background-color:#000000; /*el color tiene que ser el del borde inferior del gif*/
	background-image:url(fondo.gif);
	background-position:top;
	background-repeat:repeat-x;
}

Si quisieras un degradado lateral, tendrias que hacer un gif de 1px de alto y la anchura necesaria (por ejemplo 600px).

Si el gif empezara desde la izquierda tienes que tener en cuenta que color tendria en el borde derecho, y si empezara desde la derecha el color del brde izquierdo, para poner ese mismo color en el background.

Una vez que tengas el gif, tienes que poner el siguiente codigo css:

Código:

body{
	border: 0px;
	margin: 0px;
	background-color:#000000; /*el color tiene que ser el del borde derecho o izquierdo del gif*/
	background-image:url(../img/fondo.gif);
	background-position:right; /*o left*/
	background-repeat:repeat-y;
}

Puedes ver un ejemplo en mi pagina: www.arriaka.com

Saludos!

[wolfmoon]

ok, todo claro.
Gracias

[daPhyre]

¿Hay alguna forma de hacer esto de forma dinámica para que ocupe todo el alto o largo de la pantalla independientemente del tamaño de esta?

[iconogt]

Una opción más!

Código:

body{
	border: 0px;
	margin: 0px;
	background : #000 url('fondo.gif') repeat-x top left;
}

o bien..

Código:

body{
	border: 0px;
	margin: 0px;
	background : #000 url('fondo.gif') repeat-x fixed top left;
}

Lo de FIXED es para que al hacer scroll el fondo se quede en su lugar.
Sldssssss,

[iconogt]

Iniciado por daPhyre

¿Hay alguna forma de hacer esto de forma dinámica para que ocupe todo el alto o largo de la pantalla independientemente del tamaño de esta?

Creo que lo que quieres es que el fondo se repita en (x) y (y) al mismo tiempo no?
pues si es eso basta con que le quites repeat-x, te quedaría asi..

Código:

body{
	border: 0px;
	margin: 0px;
	background : #000 url('fondo.gif') top left;
}

[daPhyre]

Iniciado por iconogt

Creo que lo que quieres es que el fondo se repita en (x) y (y) al mismo tiempo no?

No, lo que quiero es que, por ejemplo, que una página sea degradada desde arriba con un color azul, y que baje hasta quedar en color blanco, pero que este efecto aparesca sin importar si el usuario que la ve tenga una resolución de 640x480 o 1280x1024. ¿Es esto posible? ¿Cómo podría hacerlo?

[caricatos]

Hola:

Los fondos degradados solo se pueden conseguir con un fichero gráfico repitiéndose en el sentido que quieras, pero el fichero es estático. La única forma de se estire o achique es ayudándote de otros lenguajes.
Si dispones de php y javascript puedes usar eltruco que explico en esta página: Gradientes.
También hice una aplicación online: Gradientes (php + librerías GD)

Saludos

[daPhyre]

¡Gracias por la solución! Cre que es justo lo que buscaba.

Lo intentaré pronto a ver si me resulta. Gracias de nuevo.

[ansina]

Hola a todos. Primero que nada saludos, dado que soy nuevo en el foro. Es un placer pertenecer a un grupo como este. Me gustaria preguntar sobre este tema que estan hablando, y que he entendido mas o menos como hacerlo, pero no se muy bien si me va a resultar. La verdad es que me gustaria conseguir el efecto del fondo tal y como lo tienen en la web http://www.serveisweb.com/.

Gracias por adelantado.

Saludos.

[xaguar]

hola ansina, lo que ves en la página se puede hacer con 3 divs, el primero tiene un degradado el segundo solo el color de fondo, puede ser un gif o con cógigo. ademas de que puede ser el fondo de toda la página y el tercer div, es decir el de abajo tiene un gif con el mismo degradado que el de arriba pero en sentido contrario o bien girado 180 grados.

Pero lo que creo que usan en ese sitio es un cms talvez jommla o algo similar. pero básicamente aplican lo mismo que te explique arriba.

[ansina]

Hola de nuevo. He pensado en lo que me dices de los tres divs. En principio estoy un poco verde en css, igual te pregunto tonterias. Fijandome en el efecto conseguido en esta página, veras que la imagen que usan en la parte superior es la misma que la parte inferior(digo la misma si la descargas). Eso indica que la giran con el codigo, ¿como?. Y despues cuando la pagina crece, o sea las capas son mas grandes solo meten la imagen que usan de degradado arriba y abajo, lo demas lo dejan del color del fondo, o como tu dices con un tercer div. ¿Como lo hacen?, tienes algun ejemplo de como girar o por donde buscar??,

Millon de gracias por adelantado desde Canarias.

Saludos.

[xaguar]

Hola denuevo ansina, mira esta pagina www.amuch.org tiene el mismo efecto y parece ser la misma imagen pero son dos diferentes. YO modifique la plantilla que se usó por eso lo sé, la programación php logra eso pero repito son dos imagenes diferentes. Está hecho con un manejador de contenidos.

pero si la haces completamente con código desde cero la solución que yo usaria es la de los 3 divs.

Saludos.

[ansina]

Hola otra vez amigo Xaguar. Sigo pensando en todo lo que me cuentas, y no veo la solucion sencilla. Te voy a dar otra pagina de ejemplo de lo que me gustaria controlar. Fijate en esta web http://www.csszengarden.com/tr/espanol/.
Si la miras, la imagen superior izquierda, se llama igual que la inferior derecha. Como siendo la misma imagen, esta en la misma pagina, de dos formas distintas??. ES parecido al caso que te comentaba la web de http://www.serveisweb.com/, como siendo la misma imagen, la giran en la misma pagina??. Como se hace el giro, rotacion o lo que sea de la imagen??.

Estoy un poco perdido.

Gracias

[daPhyre]

Fijate bien. Si descargas las imagenes, verás que la de la esquina superior izquierda no es el fondo, si no un div encima de este con esa imagen. Si le das "descargar fondo", solo descargas el fondo de la página, que sería la de la esquina inferior derecha.

Para el segundo caso, es lo mismo, la imagen que descargas es "fondo_up". El fondo inferior está por aparte. Espero esto te sirva de ayuda. Suerte

[xaguar]

Hola ansina, disculpame por no haber respondido antes. Tuve que dar un curso fuera de la ciudad y no pude conectam en la semana pasada.

Lo que dice daPhyre es corecto. Es diferente la imagen de fondo de la web y la imagen de fondo de los div que hay en ella, cuando tu guardas la imagen de fondo con el navegador no es la imagen del div. sino la imagen de la web (el body por ejemplo).

Te ecomiendo hacer esta prueba, espero que te de una mejor perspectiva. Descarga el navegador firefox e instalalo, si no lo tienes instalado. De la web del navegador mozilla.com, descarga el agregado web developer. Una vez que lo tengas abre la pagina que mencionas:
http://www.csszengarden.com/tr/espanol/
y en la barra webdeveloper opime el boton "images" despues "Outline Images" y posteriormente "Background Images".

Esto pondrá un borde rojo en las imagenes que están como fondo en el body de la web y en los divs. Y si te colocas sobre la imagen y con el boton derecho del ratón seleccionas ver imagen de fondo verás que son imagenes diferentes. Esto por supuesto con el navegado firefox.

Recuerda que cuando diseñamos una web debemos probarlo polomenos en media docena de navegadores, ya sean de PC con windows, mac, linux, etc. Por ejemplo en mi caso si solo tengo windows a la mano, hago pruebas con Firefox, Opera, Safari e Internet Explorer.

Pero en resumen no es la misma imagen y no la rotan con código en los casos que me dices.

La segunda web que dices parece estar hecha con Joomla o Mambo, pero siguen siendo imagenes diferentes. Digamos que es como una ilusión óptica lo que hace parecer que se rota la imagen.

Prueba y me cuentas tus conclusiones.

Saludos Amigo ansina.

[ansina]

Hola amigo Xaguar. He estado analizando con detetimiento todo el tema, y tengo claro como llegan a este tipo de resultado, piniendo una imagen para el body, y los demas, con fondos superpuestos para los divs. En estos casos no tengo duda. Despues de ver varios ejemplos, he intentado hacer lo de la gente de http://www.serveisweb.com/, y no lo he conseguido con capas. Seguramente, como me comentavais mas atras, estara gestionado con un cms. En cualquier caso mil gracias, y he estoy aprendiendo un monton sobre este tema de los fondos.