Degradado lineal de fondo en html

[RitaBbaa]

Hola

Hay alguna forma de hacer un degradado lineal en el fondo de una web con HTML. Sin ser php por favor no tengo ni la menor idea de como trabajar con eso.

saludos.

[kahlito]

Hola Luisa_114, te refieres a un degradado hecho desde Photoshop y luego meterlo como fondo en html?

Por si es eso te dejo un ejemplo:

Código HTML:

<style type="text/css">
body {
	background-image: url(tufondodegradado.gif);
}
</style> 

Saludosss

[RitaBbaa]

Que rápido

Pues me referia a si se puede hacer un degradado lineal usando el código, sin necesidad de imagen. Eso se puede?

saludos

[Klon22]

NO es posible en lenguajes como el html, pero lo que yo haría sería una tira de imagen de el alto de la web por un ancho de 5 px con esto lograrías que no pesará casí nada.
Me expliqué?
de todas maneras seguro que recibirás mas comentarios-
Salduos

[K3NNY]

Uhm, creo que se puede hacer con Javascript, pero creeme, es mejor hacer una imagen de 1 pixel de ancho y los que necesites de alto. Porque la imagen no va a ocupar practicamente nada y si el visitante tiene desactivado el javascript (por seguridad) va a ver el degradado igual.

[RitaBbaa]

mmmm el tema de las imagenes es que depende, cuando se utilizan en un fondo y la resolución es muy grande se repite, y queda muy feo. Podría quedar como cortada y en la parte de abajo volver a empezar el degradado otra vez.

Me gustaría obtener ese javascript y ver lo que puedo hacer con él, en caso de que no me cuadre la cosa entonces pensaria que hacer con la opción de imagen.

Muchas Gracias.

[inforsol]

Iniciado por Luisa_114

mmmm el tema de las imagenes es que depende, cuando se utilizan en un fondo y la resolución es muy grande se repite, y queda muy feo.

Para que sólo se repita en sentido horizontal:

Código HTML:

<style type="text/css">
body {
  background-image: url("tufondodegradado.gif");
  background-color: #FFFFFF;
  background-repeat: repeat-x;
}
</style> 

Si quieres que cubra toda la altura de la página, házlo de, por ejemplo, 5 píxeles de ancho y 4000 píxeles de alto (o los que necesites). En el color de fondo (background-color) le pones el mismo color en que acabe el degradado, para que si, a pesar de todo, la página sobrepasa los 4000 píxeles de alto, no quede el color "cortado". Yo lo haría así, pasando de javascript.

[caricatos]

Hola Luisa_114:

En las FAQs javascript puse un código que vale sin imágenes...http://www.forosdelweb.com/showpost....&postcount=129

Si dispones de php y librerias GD 2.0 puedes ver puedes ver el código de este mensaje: http://www.forosdelweb.com/showthrea...ght=gradientes

y ver el resultado en esta página: http://www.caricatos.net/inicio.html

Saludos

[ramm]

Lo que te dice inforsol es mas que suficiente, tu eliges con css si la imagen se repite en vertical, en horizontal o que no se repita, ademas una imagen asi ocupa muy poco y hasta puedes ponerle otros efectos.

[RitaBbaa]

Muy buenas las formas de hacerlo, era lo que me hacia falta. Muchas gracias, saludinessssss

[pollobolo]

como q llegue tarde a la pregunta
pero aki esta la solucion para los q andan buscando todavia
<div style="color: white; padding: 12px; background: -moz-linear-gradient(center top , rgb(59, 103, 158) 0%, rgb(43, 136, 217) 50%, rgb(32, 124, 202) 51%, rgb(125, 185, 232) 100%)
;">Pollobolo</div>

[Yarriot]

Iniciado por pollobolo

como q llegue tarde a la pregunta
pero aki esta la solucion para los q andan buscando todavia
<div style="color: white; padding: 12px; background: -moz-linear-gradient(center top , rgb(59, 103, 158) 0%, rgb(43, 136, 217) 50%, rgb(32, 124, 202) 51%, rgb(125, 185, 232) 100%)
;">Pollobolo</div>

no me funcionó este método cumpa :(

[edyrram]

Iniciado por Yarriot

no me funcionó este método cumpa :(

Segun lo probe con tres navegadores, solo funcionó con mozilla; Para chrome y explorer no me funciona, creo q es mejor hacerlo con la imagen como explica Inforsol

[Kurozaki]

Iniciado por pollobolo

como q llegue tarde a la pregunta
pero aki esta la solucion para los q andan buscando todavia
<div style="color: white; padding: 12px; background: -moz-linear-gradient(center top , rgb(59, 103, 158) 0%, rgb(43, 136, 217) 50%, rgb(32, 124, 202) 51%, rgb(125, 185, 232) 100%)
;">Pollobolo</div>

Logicamente, solo va a funcionar en mozilla firefox.

-moz-linear-gradient(center top , rgb(59, 103, 158) 0%, rgb(43, 136, 217) 50%, rgb(32, 124, 202) 51%, rgb(125, 185, 232) 100%)

__________________________________________________ _______________________

Iniciado por luisa_114

cuando se utilizan en un fondo y la resolución es muy grande se repite, y queda muy feo.

Y yo concuerdo con otros compañeros, con la imagen de 1px, es más que suficiente, con una imagen de 1px, no se notara la diferencia que se repita en x o y (depende como este la imagen).

Otra cosa, si no quereis que se repita y abarque el 100% de la pantalla, sin que se repita si es mas grande el monitor, puedes hacer poniendo la imagen con el tag <img> al principio de tu body y con estilos CSS agregas esto.
hay muchas maneras, no veo por que usar javascript.

[SoyNoob]

Prueba con este codigo, espero que te sirva! :)

<style type="text/css">
body {

background-image: url(''tuimágen.jpeg'');
background-repeat: no-repeat;
background-attachment: fixed
}
</style>

[foxhalcoon]

Esta última opcion es la ideal si quieres trabajar con una imagen como tal osea una foto, una imagen completa, porque el contenido de la pagina se mueve pero el fondo queda estatico, y si lo haces con la tecnica de generar una linea de imagen degradad de 1 px o 2px según el diseño del degradado como ya lo han planteado pues te resulta aun mejor, porque a la fija nunca se va a ver en ninguna resolución algún descache. Cuando buscas hacer diseños web funcionales porsupuesto que siempre se planteara hacer lo maximo posible en codigo , pero hay exepciones, pues el html solo no lo hace(esto lo lee todo navegador por supuesto) pero los demas lenguajes pueden estar desabilitados y hay es cuando todo lo trabajado se hecha a perder por querer ser tan especialista. Es mejor aprender a manejar las medias.

[bien30]

aquí te dejo esto inténtalo es para diferentes navegadores


background: -moz-linear-gradient(white,green);
background: -webkit-linear-gradient(white,green);
background: -o-linear-gradient(white,green);
background: -ms-linear-gradient(white,green);
background: linear-gradient(white,green);