Personaliza el fondo de tu sitio Web

Un artículo de ... manu    5 Comentarios

En este artículo quiero comentar algo que seguro que muchos quieren saber algo más de como personalizar el fondo de nuestras páginas Web. Algo que básicamente no tiene mayor problema, pero a efectos del desconocimiento puede llegar a ser una penitencia.

Quiero mostrar como aprovechar los recursos de las etiquetas “Html” y “body”.
Al margen del propio contenido ( las capas div, table etc) de tú página Web, blog, etc.
Por que ya sabes que puedes incluir imágenes al fondo de cualquier tabla, Div, parrafo etc., en otro momento crearé otro artículo sobre esto último, pues supongo que será de interés.

Los pasos para conseguirlo…

Puedes ver en mí web que tengo algunas imágenes mezcladas en el fondo y en el logo, a mí este efecto para mí sitio me parece adecuado y me gusta como lo deje. Si te fijas, al mover el Scroll la imagen del mapa del mundo está fija, por que he utilizado la propiedad (css) “fixed”, con lo cual le digo a la imagen que se quede fija y no se desplace al mover el Scroll.
He creado un documento con un ejemplo sencillo para que puedas ver el resultado que viene aser algo parecido a el fondo de este sitio.
Para ello, he útilizado dos imágenes;
- una imagen con formato jpg que voy a emplear para el primer fondo del documento (Podría útilizar otro formato sin ningún problema) y lo meto en la etiqueta “Html”, escibiendolo en los estilos Css de esta manera;

html{
background:#FCFCFC url(http://www.internavegacion.com/temas_codigo/imagenes/oso.jpg) no-repeat fixed 50% 50%;
}

Explicando el Css de “html”…

Como puedes ver a la etiqueta “Html” le asigno un color de fondo #FCFCFC, luego le pongo la dirección absoluta a la imagen http://www.internavegacion.com/temas_codigo/imagenes/oso.jpg
Para este ejemplo he útilizado una Url absoluta, cuando lo podría haber hecho con una Url relativa al documento, pero para el ejemplo está bien.
Luego le digo a la imagen que no se repita en el documento con la propiedad “no-repeat”, siguiendole la propiedad “fixed” que lo deja fijo en el fondo y quedará estática aunque desplacemos el scroll.
Como último posiciono la imagen en el centro donde quiero ponerla “50% 50%”, o lo que es lo mismo “center center”. Sobre esto último, la posición de la imagen, puedes elegir las medidas que creas oportunas, de eso hablaremos en otro post.

La imagen de fondo en el body…

En el body posiciono y escribo la imagen de esta manera;

body {
background: url(http://www.internavegacion.com/temas_codigo/imagenes/lineas.png);
margin:0;
padding:0;
height:100%;
}

en este caso también he colocado una ruta absoluta para la imagen, como no me importa que se repita la imagen, lo dejo sin definir el estado del valor, lo que es lo mismo, sería dejarlo como “repeat”, o sea que se repita. En el caso de que quisiera asignarle otro estado debo esribirlo despues del paréntesis final de la imagen, ya sabes, “no-repeat”, “repeat-x”, “repeat-y”... etc.

Aquí no hay mucho que explicar, solo que dejo predeterminado a “Body” los atributos sin margenes, ni padding, pero si con un alto del 100% del documento, lo cual hace que se repita la imagen con formato “png” en todo el documento.

Bueno, las imágenes que he útilizado para este ejemplo las muestro aquí debajo;

Esta es la que está en el fondo….

Esta es una imagen png que es transparente, en realidad la que muestro aquí no… solo que he hecho una captura mayor para poder ponerla aquí y así poderla ver, recuerda que la imagen real tiene el tamaño de 4 pixeles, y sería dificil poner una captura en su tamaño real, pero para que se pueda ver como es, la captura es mayor.

Aquí le he dado un color blanco al fondo de la imagen para que puedas ver los cuadritos (pixel) con la que he creado la imagen. Creo que aquí en esta captura de aprecia mejor los pixeles grises.
La imagen la he creado con el programa de adobe “Fireworks”, pero se puede hacer con otros editores gráficos, o de imágenes y exportarlo en formato png transparente.

Dejo aquí el resultado del archivo que he creado para este ejemplo es sencillo y básico, pero queda muy bonito y puedes ser muy práctico para nuestros diseños de páginas. Quiero decir que esto me recuerda al funcionamiento de los editores gráficos en su forma de trabajar con capas. Creo que tiene mucha similitud aunque son dos aplicaciones diferentes, primero la capa de debajo, luego otra encima que no afecte a la de debajo y así hasta conseguir el efecto que deseamos.

Bueno espero que te sirva de mucho este artículo, y recuerda si tienes alguna pregunta escribe tú duda aquí en los comentarios.

Un saludo a todos.