En algunos blogs he visto un truco para hacerlo usando un gadget HTML, pero a mi entender, este truco no es el mejor y te explicaré porqué creo que eso es así.
Cuando entras en cualquier página o blog, lo que ves es lo que "leen" los navegadores en el código fuente de esa página.
Y te lo muestran en el mismo orden en que lo leen.
La prueba más palpable de eso la tienes en este mismo blog. Cuando entras, primero ves el fondo, luego la cabecera, a continuación la menubar, luego la sidebar de la derecha, después las entradas y por último la sidebar de la izquierda.
Y en las dos columnas laterales los gadgets van apareciendo de arriba a abajo.
Hay blogs en los que antes no acaban de cargar todos los gadgets, pueden salirte canas. Sobre todo si esos gadgets han de descargar información de otras páginas.
Así que si tu colocas tu fondo en un gadget HTML debajo de, pongamos por caso, uno de un reproductor, otro de un slide, otro de un contador, otro de... lo que sea, hasta que el navegador no lee el del fondo puede pasar un cierto lapso de tiempo.
Y eso suponiendo que lo lea bien.
Sin embargo, si colocas la dirección de la imagen que quieres que se vea, directamente en el código de tu blog, el navegador será eso lo primero que verá y, por ende, lo primero que mostrará.
Básicamente y salvo excepciones que luego te mencionaré, el fondo se coloca en body {
En la pestaña Diseño, Edición de HTML, bajas un poco y después de todas las Variable name etc. verás esto:
varias líneas de código
y en ese grupito de líneas hay una que dice background.
Pues ahí es donde has de colocar la dirección de tu imagen. (Porqué la imagen ha de tener dirección, claro está).
Puede ser que quieras poner una imagen pequeñita que se va a repetir a lo largo y ancho del blog hasta formar un todo, como en este mismo blog, en este caso la línea de background será así:
background: url(la direccion de la imagen);
Si quieres que la parte útil del blog se deslice por encima será así:
background: url(la dirección de la imagen) fixed;
Esto de que se deslice por encima del fondo no funciona en todas las plantillas. En ésta, (harbor), por ejemplo, no funciona ya que la zona útil abarca toda la pantalla.
Si quieres poner una imagen grande, que ocupe todo el fondo del blog y que no se mueva, el código del background sería así:
background: url(la dirección) top center no-repeat fixed;
¿Que le estás diciendo con ésto?
Que la coloque arriba de todo, centrada, que no se repita y que no se mueva.
Quizá pienses: ¿Porqué le he de decir que no se repita si va a ocupar toda la pantalla?
Pero la pregunta que deberías hacerte es: ¿Va a ocupar realmente toda la pantalla?
Porqué ante todo has de tener en cuenta que la imagen sea lo suficientemente grande como para ocupar toda la pantalla de cualquier pantalla, no solo de la tuya.
Pero esto es bastante difícil, ya que las hay de muchos píxels de ancho, así que vamos a pensar en algo razonable.
La mayoría de pantallas son de 1024 pixels de ancho, (las de 17"), y las hay hasta de más de 1600 píxels, así que si pones una imagen que pueda cubrir la pantalla más ancha que exista, en pantallas normales no se verá entera.
¿Como solucionarlo? Muy fácil: Pones una imagen normalita, y cubres lo que pueda verse en esas pantallas más grandes con un color afín al fondo para que no desentone.
Con lo cual el código del background debería ser así:
background: $bgcolor url(dirección) top center no-repeat fixed;
¡CUIDADO! ese $bgcolor es una variable, así que antes de colocarla asegúrate de dos cosas:
- Que esta variable existe en tu código. (Es fácil, es la primera de todas).
- Que realmente se escribe así. (Puede estar escrita de varias formas: bgColor, mainBgColor, etc.)
Si existe, pero se escribe de otra forma, pon lo que veas detrás de name= entre comillas.
Si no existe, (y eso lo puedes averiguar facilmente en Fuentes y colores, pues no habrá forma de cambiar el color de fondo del blog), créala o pon el código del color que quieras.
En la entrada anterior a ésta ya expliqué como averiguar el código de un color, y en varias entradas de éste y de otros blogs he explicado como crear variables. (Usa el buscador o las etiquetas si necesitas verlas).
Por otro lado está el tema de la altura de la imagen, y ahí si que has de pensar en que cubra la pantalla más alta que exista, pues lo contrario es una chapuza ya que se ve el color del fondo arriba o abajo y no queda bien.
En este caso, lo ideal es que tenga al menos 1100 pixels de altura, así seguro que las cubre todas.
Y en caso de no poder hacerla más alta, lo que puedes hacer es decirle que la repita, pero solo a lo largo, con lo que el código sería así:
Y, claro está, copiar la dirección de algún sitio donde no reduzcan la imagen. Sky Drive es un buen sitio para esto.background: url(dirección) top center repeat-y fixed;
Si has llegado hasta aquí, quizá recuerdes que al principio te he dicho que hay excepciones y así es.
No se trata de que no la hayas de colocar en body, sinó que has de asegurarte de que no haya más direcciones de fondo.
Plantillas como la de este blog, (harbor), y un par más de las que tiene blogger de serie, tienen imágenes de fondo y no siempre están colocadas en body. En estos casos has de borrar primero todas las imágenes que haya de fondo antes de poner la tuya y si no estás muy segur@ de que una dirección vaya a ser parte del fondo haz lo siguiente: Borras una, Vista previa. ¿Es del fondo? Guarda plantilla. ¿NO es del fondo? Borra cambios. Y así hasta que elimines todas las imágenes que hay en el fondo original del blog. (Esta plantilla, si mal no recuerdo, tenia 4, en varios wrap).
Ya sabes que suelo tunear plantillas. Si en alguna de ellas he tenido que variar algo así lo he dejado explicado en alguna entrada en el blog tuneado. (Puedes ver una lista de las plantillas que he tuneado aquí).
