Fondo Fijo Web Resuelto

Caimacan escrito el 03.11.PM a las 12:33 horas

Hola, muchos de nosotros hemos hablado sobre este asunto de poner un fondo de imagen fija para nuestra web.

Si recordáis, no éramos capaces de insertar  una imagen JPG en condiciones y sin que ese fondo se repitiera como si fuera un mosaico y además que se comportara de una manera fija y llenando la pantalla de cualquier tipo de monitor. Bien, pues lo he conseguido, he modificado el código que me he encontrado por la web añadiendo un par de líneas y funciona perfectamente.

Este es el código:

<style type= "text/css">
html {
background: url(index_htm_files/fondo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

Si os fijáis, he metido la imagen JPG que quiero como fondo dentro de la carpeta index_htm_file y la he llamado fondo.jpg, podéis cambiarle el nombre por supuesto.

La forma de meter ese código es el mismo de siempre.

Creamos un cuadrado en cualquier sitio de nuestra página.y lo remplazamos con ese código en el marcador de lugar (head). Así de simple.

Al quedarse estático ese fondo, cuando giramos la rueda del ratón y mantenemos pulsada la tecla Ctrl y alejamos o acercamos nuestra página el fondo sigue estático.

Ya no hace falta meter a nuestro fondo una trama, o un color liso.

A partir de ahora podremos hacer páginas algo más vistosas con el fondo que queramos con el código que os dejo.

Probadlo y me contáis.

Un saludo a todos.

Toño.

 

Comentarios

Carlos escrito el 04.11.AM a las 09:37 horas

 

 

Gracias Toño eres el mejor tantas vueltas y al final  tú lo haces sencillisimo funciona perfecto y en todos los navegadores  lo bueno es que con tan solo cambiar el nombre a la imagen en un solo proyecto puedes poner un fondo distinto a cada pagina. El pasteboard background seria la imagen.jpg,  hay que buscar imágenes de calidad y gran tamaño para que no se vean borrosas sabes de algún sitio para conseguir aumentar la imagen sin perder calidad o imágenes ya aumentadas, se podría poner el page backgrond trasparente para que solo se vea la imagen.jpg de fondo y encima de esta  los botones paneles de texto y demás. Gracias y un saludo

Yo encontre esta

http://www.fondosya.com/

Caimacan escrito el 04.11.PM a las 13:28 horas

Efectivamente Carlos, en todos los navegadores funciona y así es como debe ser. La página que dices no está mal, aunque siempre se le puede echar imaginación y hacer uno mismo los dibujos de fondo, montajes, degradados y exportar un JPG que tenga calidad.

Por ejemplo, y respondiendo a tu pregunta de subir la calidad de la imagen que queremos para el fondo. En el propio programa podemos hacerlo, le damos la calidad que uno quiera. Como habréis visto es aquí:

Supongamos que quiero meter ese paisaje como fondo de mi web, también puede ser algo que yo haya dibujado o montado como he dicho, depués le digo exportar y se abre el panel donde voy a transformar la calidad, donde pone DPI, puedo cambiar ese valor, cuanto más grande sea, más calidad le estoy dando a la foto y también más tamaño. Le doy aceptar y ya tengo exportada la foto con algo más de calidad.

Se puede hacer en otros programas al estilo de Photopaint o Photoshop pero ya que el programa me lo permite, lo hago directamente aquí.

Se puede poner un panel transparente delante como dices sí y que se siga viendo el fondo, ese efecto queda muy bien, se lo he hecho a un compañero en una web que está diseñando de rutas 4x4 y ha quedado muy bien.

Ahora sólo hay que echarle imaginación, por fin lo hemos conseguido.

Un saludo Carlos.

Toño.

Carlos escrito el 05.11.PM a las 15:29 horas

Hola Toño como se hace para que el background quede trasnparante y de vea solo la imagen jpg de fondo.Gracias y un saludo.

Caimacan escrito el 06.11.PM a las 19:11 horas

Hola Carlos, simplemente crea un cuadrado a lo largo y ancho de lo que es tu página, es decir, con las mismas proporciones y le das el color que quieras y después le haces transparente con la herramienta para ello, ya sabes, el simbolito de la copa. De esa forma se ve lo que hay detrás, en este caso el pasteboard background.

Saludos.

Toño.

Carlos escrito el 07.11.PM a las 15:06 horas

Funciona gracias Toño, esto no es una tonteria este truco vale su peso en oro.Un saludo gracias.

enayibsalomon escrito el 20.10.AM a las 03:25 horas

Hola Toño, excelente tu aporte, lo he probado y funciona a la perfección, incluso, he insertado un gif animado con tu código y he conseguido un fondo de página animado.

 

Nayib

aps_hidroservice escrito el 16.08.PM a las 12:28 horas

perdoname toño,reconozco que estoy aprendiendo a usar todas las herramientas y estoy reciente en todo ,coloque tu indicacion tal cual pero cuando deseo visualizarla no se ve nada,inclusive no se donde esta la copa,el boton de transparencia,te ruego me des mas instrucciones,muchas gracias por tu colaboracion