Diseño Web: Fondo Disuelto

Cuando uno comienza sus primeros pasos en el diseño web generalmente lo hace como decimos en Costa Rica, a la "chambona". Esto quiere decir que montamos nuestras páginas a como caigan las cosas. Colocamos imágenes sin medir tamaños o sin tener el toque creativo del cual carecemos la mayoría que nos dedicamos principalmente a la programación.

Recientemente aprendí una técnica que muchos dirán que es básica, pero para este servidor no lo era y nunca está demás dejar documentado algo que para mi es imprecindible para diseñar de manera optimizada para la carga.

Si queremos que nuestra página luzca un poco más atractiva, podemos usar en lugar de fondos con un color plano, fondos con efectos como el fondo disuelto.

Primero debemos generar una imagen con este tipo de fondo. Usemos la herramienta Gimp para construirla. Tomemos la herramienta de mezcla:


Escogemos después el modo de disolver:


Arrastramos el cursor en nuestra imagen de arriba hacia abajo para generar el color disuelto en esa dirección. Ahora viene el truco para la optimización de carga. En lugar de generar un tamaño de acuerdo al espacio que queremos llenar en nuestra página, escalamos la imagen a un ancho de 4 pixeles dejando el tamaño de largo igual:


Quedamos con una imgen que luce así:


Ya en nuestro CSS usamos la propiedad de "repeat" para generar esta misma línea a traves de todo el ancho del fondo que deseamos cubrir. Al usar "repeat-x" nos ahorramos bytes de carga lo cual nos ayuda en la experiencia usuario.

#footer{
background: url(images/disuelto.jpg) left top repeat-x;
}