Un buen fondo es primordial

Hoy trataremos de sumergir nuestro espacio blógico en una esfera estética proporcionada por el fondo. Tras la declaración de intenciones gráficas que supone la cabecera, empapar todas y cada una de las páginas del blog con una imagen de fondo sugerente terminará de definir nuestro estilo y la dirección de nuestro delirio electrónico.

Como primer paso, deberemos escoger la imagen adecuada. Tendremos en cuenta dos factores: el peso de la imagen (lo que ocupa en Kbs) y su aspecto:

- El peso: es importante que la imagen no pese mucho. Por ello procuraremos seleccionar imágenes que, al repetirse, creen patrones. De esta manera nuestro fondo en .jpg o en .gif (descartaremos cualquier otro formato, de momento), una vez cargado, se repetirá sin dilación, permitiendo a nuestros insignes visitantes dedicarse a bucear por el contenido del blog, que es a lo que han venido.

- El aspecto: siempre tenderemos hacia las imágenes sencillas, que no desvíen la atención de lo que nos interesa y que no produzcan un dolor de cabeza instantáneo al pobre blogadicto que los sufra. Un mal ejemplo de fondo lo podemos ver aquí. Obsérvese que tarda una cantidad ingente de tiempo en cargar y, además, una vez visualizado, produce en el espectador brotes psicopáticos de baja frecuencia. Aquí se puede observar otro ejemplo claro de lo que no se debe hacer.

Por el contrario, observe en este otro blog la elegancia con la que se ha elegido el fondo, lo acorde con el contenido, y lo bien ejecutado que está para que no pese mucho ni en la carga de la página ni en la mente del blogovidente. Si observamos con detenimiento, la imagen de fondo se reduce a esto, sujeto a una repetición a lo largo del eje Y (vertical). Puede usted encontrar otro ejemplo más recargado pero no por ello menos elegante aquí. Observará que en ambos ejemplos la repetición es en el eje Y, de gran utilidad debido al carácter vertical de los blogs, y así será por lo tanto el ejercicio de hoy, al que damos paso inmediatamente.

Como primer paso y, una vez elegida la imagen de fondo, la subiremos a nuestro albergador de imágenes online preferido. Obtenido pues el enlace, accederemos a nuestra plantilla y buscaremos el siguiente código, al principio de la misma.

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Entonces, añadiremos tres sencillas líneas:

body {
background: url(aquí va la URL de nuestra imagen);
background-repeat: repeat-y;
background-position:center;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:left;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

De las cuales:
- La primera indica qué imagen es la que se establece como fondo;
- La segunda indica en qué eje se repite dicha imagen: en este caso, vertical;
- La tercera se refiere a que dicha imagen estará centrada en la pantalla. Podemos elegir left para alinearla a la izquierda o right para alinearla a la derecha, según nos interese.

También podemos dejar tal línea en repeat a secas, de tal manera que el fondo se repita tanto en vertical como en horizontal, obteniendo así un efecto similar al que puede usted contemplar en esta santa casa.

Dicho esto, disfute usted de su nuevo y flamante fondo y espero verle por aquí en el próximo fascículo de bricolaje bloggero.