Novedad: ¡Completa el diseño de tu blog con una imagen de fondo!

¿Te has fijado en algunas webs, que a veces ponen una imagen fija en el fondo de página? Tienes ahora mismo un ejemplo en la portada de Meristation. Pongo aquí una captura porque esto no estará siempre, y así me sirve de ejemplo:


Pulsa sobre la imagen para ampliar

Si consigues ver la que hay ahora en meri, verás que la imagen se mantiene fija en la ventana del navegador aunque desplaces el contenido de la página hacia abajo. Ese efecto se consigue especificando en las propiedades CSS de la imagen de fondo un parámetro especial (background-attachment: fixed).

Pues bien, ahora puedes conseguir este mismo efecto para tu blog!

Para ello, nos vamos a Preferencias / Blog personal / Diseño de blog, abrimos la sección Cabecera y Skin (hasta ahora era sólo "Cabecera") y ahí tenemos un nuevo grupo de opciones que nos permiten especificar un fondo para la página general, la zona que hasta ahora ha sido siempre de ese color azul marino que podemos ver tanto aquí en los blogs como en meristation y zonaforo.

Para que podamos usar una imagen para esta nueva opción, tenemos que subirla a nuestro espacio de ficheros personales con un nombre que empiece por skin_, y lo que queramos. El tamaño máximo se ha establecido en 128KB (igual que para las cabeceras de blogs) para que no sobrecargue demasiado la página. Si el diseño que queremos usar exige más, tendremos que sacrificar un poco de calidad comprimiendo la imagen hasta conseguir el tamaño adecuado. La mayoría de programas de edición de imágenes permiten especificar el porcentaje de compresión de los JPG, que es el formato ideal para este tipo de imágenes.

Otro truco que conviene usar es el siguiente. Podemos aprovechar que la propia página cubre la parte central de la ventana. Entonces, si una vez tenemos la imagen de fondo preparada, rellenamos la parte central con un único color, el algoritmo de compresión podrá optimizar más esa zona para que el fichero ocupe menos espacio.

Aprovecho unas imágenes que utilizamos hace algún tiempo para pruebas para mostrar un ejemplo paso a paso:

Esta imagen sería la que usamos como fondo para el skin. Aunque aquí ya se muestra recortada y comprimida, espero que ya dé una idea:


Pulsa sobre la imagen para ampliar

La zona que se ve de color blanco es la que nos permite conseguir que ocupe menos espacio. Lo único que hay que tener en cuenta es el tamaño hábil de página, que aquí en los blogs es de 760 pixels, así que en la imagen de fondo que usemos como skin podemos dejar una buena zona limpia sin preocuparnos de si nuestros visitantes notaran la diferencia. Wink

Para decidir las dimensiones totales de la imagen, necesitamos saber la resolución de pantalla de nuestro visitante. Si tienes Google Analytics podrás mirar a ver qué es lo más habitual. Normalmente, podemos contar en que la mayoría no superará resoluciones de 1280×1024, así que este será el tamaño para nuestro skin. Tenlo en cuenta, especialmente si tienes una resolución menor. Piensa que cada día hay más pantallas que permiten una resolución de 1280×1024 o superior. Esto es lo que utilizamos en meristation, y en la mayoría de webs que usan esta técnica. Wink

Esta otra imagen forma parte de la zona que hemos puesto en blanco de la anterior, que podría servirnos como imagen para la cabecera del blog (esto se verá mejor cuando lo juntemos todo más abajo):


Pulsa sobre la imagen para ampliar

Y si nuestro blog fuese la portada de meri, este podría ser el resultado:


Pulsa sobre la imagen para ampliar

Amplía la imagen de arriba y observa como encajan las dos imágenes que hemos utilizado. Una vez montadas todas la piezas del puzzle, casi no se notan las trampichuelas que hemos tenido que hacer, y se pueden conseguir efectos realmente espectaculares. Por ejemplo, podríamos combinar esta técnica con lo que RikkuInTheMiddle nos muestra en su tutorial de como "tunear" nuestro blog.

Volviendo a la pantalla de configuración del diseño de blog, entramos a la sección Cabecera y Skin, subsección Skin del fondo de página. Ahí seleccionamos la imagen de fondo que hemos preparado (recuerda que tenías que subirla con un nombre que empiece por skin_), en el desplegable Desplazamiento de la imagen seleccionamos la opción Permanece fijada en la ventana del navegador, luego Repetición vertical (por si acaso alguien tiene mayor resolución que la altura de nuestra imagen), y finalmente Posición vertical arriba y centrada horizontalmente. También es recomendable seleccionar un color de fondo (el que viene por defecto, cuando no hay skin es #003366), que nos serviría para rellenar en caso de necesidad (por ejemplo, si alguien nos visita con una resolución superior a la que hemos previsto). Guardamos nuestro diseño de blog, y ya está!

Nada más por hoy, a ver que partido le podemos sacar a esto…

Por cierto, yo ya le he puesto skin a mi blog, ¿y tú, a qué esperas? ¡Imaginación al poder! Smile

 

Tutoriales u otras entradas con información complementaria: