1. Elegir una imagen, una vez hecho esto necesitamos alojarlo en algún lugar, una alternativa es alojarlo en el mismo blogger en un post, entonces añadimos la imagen en un post que sea borrador y utilizamos su dirección de url para nuestro fondo, ahora para imagenes enormes se debe cambiar parte de la dirección url ejemplo:
si la dirección es: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZvmBRQxPC3pwnr8vyLm2H5LePlonf_ijvkrevihY7nQwmlR5RiYs_0mq6DvKrqoGRR1F257UJUsRD_4S7g3XRd-R3s3uF0MpawGNp_L3V9Xzl5cNg0D7fZQivErKOAnzBv9T-9TOf-D-/s400/imagendefondo.JPG
la cambiaremos por: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZvmBRQxPC3pwnr8vyLm2H5LePlonf_ijvkrevihY7nQwmlR5RiYs_0mq6DvKrqoGRR1F257UJUsRD_4S7g3XRd-R3s3uF0MpawGNp_L3V9Xzl5cNg0D7fZQivErKOAnzBv9T-9TOf-D-/s0/imagendefondo.JPG
al cambio es en la parte de s400 a s000, con lo que la imagen se guarda en su tamaño original, ojo recuerda que debes usar el url de la parte de scr: y no href:
Ahora también puedes alojarlo en un servidor gratuito y usar su url, uno muy popular es imageshack.us, en el debes crear un cuenta y alojar la imagen que utilizaras para tu fondo.
2. Ahora vamos a la parte de edición HTML de nuestra plantilla y en la parte de body { colocamos lo siguiente:
background: url(http://img190.imageshack.us/img190/7646/imagendefondo.jpg); para el caso de un servidor gratuito.
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ZvmBRQxPC3pwnr8vyLm2H5LePlonf_ijvkrevihY7nQwmlR5RiYs_0mq6DvKrqoGRR1F257UJUsRD_4S7g3XRd-R3s3uF0MpawGNp_L3V9Xzl5cNg0D7fZQivErKOAnzBv9T-9TOf-D-/s400/imagendefondo.JPG); si utilizas un post de blogger.
3. Un problema que tuve en mi blog, fue que la imagen de fondo no se veia en el navegador Internet Explorer, según parece el Explorer tiene diferencias de interpretación de códigos en comparacion con otros navegadores, por lo que no es capaz de leer la imagen de fondo colocada en la plantilla de nuestro blog. Tras varios intentos y búsquedas, logre hacer que el Explorer visualizara mi fondo, el cambio fue sencillo y es el siguiente:
background: #000 url(http://img190.imageshack.us/img190/7646/imagendefondo.jpg);
Como se ve lo único que hice fue añadirle #000 entre dos espacios y resulto, al parecer el Explorer primero lee el color #000 y seguidamente lee el url sobreponiendo la imagen de este ultimo al primero, aunque el color del primero seguirá ahí.
4. Ahora puedes añadirle otras sentencias para tu imagen como ser alineación (top, top center, top right, etc) y repetición (repeat-x, repeat-y, no-repeat), también puedes hacer que la imagen se quede fija con la sentencia "background-attachment: fixed;".
Espero que este corto recurso de sea de utilidad.
Post relacionados:
Conociendo las opciones de Blogger
Crear y usar un blog en Blogger
Blogger in draft: gran alternativa para los usuarios
0 comentarios:
Publicar un comentario