AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Poner un fondo personal en un blog

jueves, 29 de enero de 2009

Esta es una pregunta que me hacen a menudo: ¿Como puedo poner mi propia imagen en el fondo de mi blog?

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:
body {
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:
  1. Que esta variable existe en tu código. (Es fácil, es la primera de todas).
  2. 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í:

background: url(dirección) top center repeat-y fixed;

Y, claro está, copiar la dirección de algún sitio donde no reduzcan la imagen. Sky Drive es un buen sitio para esto.

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í).

Imprime esta entrada

12 comentarios. ¿Quieres añadir el tuyo?

  1. Zorra M.F ha dicho
  2. Hola Eulalia. Antes de empezar quiero darte las gracias por que con tus blogs aprendo muchisimo, gracias de verdad. Lo que yo queria pedirte en particular ahora era si no podrias decirme como poner uns imagen pequeña o un avatar de mi blog con la respectiva caja de su codigo debajo para que los demas puedan llevarme a su blog. Lo vi en varios blogs pero la explicacion de como hacerlo no la encuentro en ningun lado. Muchas gracias bonita y millones de besos!

  3. Eulalia ha dicho
  4. Zorra:
    Eso está en esta entrada.
    Besos.

  5. elt ha dicho
  6. Hola! primero de todo felicitarte ,estás hecha una artista dios mio!!es genial el trabajazo q haces,y estoy segura q es culpa mia(soy la manazas mas grande del mundo),pero llevo todo el santisimo fin de semana intentando cambiar el fondo(la plantilla es clasica,vamos la mas normalita)y cargo imagen-busco el body-lo clavo detras de bgcolor...y nada, me sale el fondo en blanco:(,y sé q es una bobada fijo,pero ya me desespera :).bueno ,pues eso, q si tienes un ratito y me dices...GRACIAS de antemano,un beso wapa.
    ah! el humilde y novato blog es http://undosundosundos.blogspot.com/ mi chico estrá encantado de verte por alli ,lo dicho un besazo.

  7. Eulalia ha dicho
  8. elt:
    No se que decirte. Si usas el código adecuado a la imagen que quieras poner, y no te dejas ningún signo, ni espacio, debería funcionar.
    saludos.

  9. DRIADA ha dicho
  10. te escribia dandote las gracias y desapareció

  11. DRIADA ha dicho
  12. Bueno pues ahora te digo porque las gracias ya he conseguido cambiar la imagen de fondo del blog muchas gracias

  13. Placy ha dicho
  14. Hola Eulalia vengo a hacerte una visita y a traerte un regalito ,pasate por mi blog a recogerlo.
    Un besito.
    P.D. Felicidades por tu blog es genial.

  15. Pilar ha dicho
  16. Guau! Estoy alucinando con tu blog! justo andaba buscando como renovarle la imagen al mio! Mil gracias por este super-blog lleno de interesantes trucos! Por supuesto, te invito al mio:

    http://eldadodelarte.blogspot.com

  17. Anónimo ha dicho
  18. hola!!!!

    como hago de ponerle fondoa mi blog??? esta es mi plamtilla con algunos efectos que le puse ..pero nose como ponerle fondo...espero que me puedas ayudar. saludos!!

  19. Yoh_Sweety ha dicho
  20. como hago de ponerle fondoa mi blog??? esta es mi plamtilla con algunos efectos que le puse ..pero nose como ponerle fondo...espero que me puedas ayudar. saludos!!


    inmtente dejasrte los codigos pero no se puede por aca...

    te dejo mi mail asi te los paso


    yoh_sweety@hotmail.es

  21. Sandra ha dicho
  22. Hola Eulalia, gracias por toda la información que nos brindas.Estoy intentando cambiar el fondo de mi blog, pero por más que lo intento me sale el fondo blanco.¿podrías ayudarme?Muchas gracias por adelantado.
    Mi blog: sandrafg.blogspot.com

  23. Pepe HR ha dicho
  24. !Ya!, lo consegui al final, cambie el tamaño de la imagen, el codigo que use es...
    backgrund:$bgcolor...
    url(http://+++++++) top center;
    aunque no me gusta mucho el resultado, pero bueno, ire jugando con el tamaño de las imagenes, aunque, creo que eso no era el problema, sino mas bien, de no poner bien el codigo porque el top lo ponia pegado al parentesis, y creo que algo tiene que ver.
    ¿Podrias hecerme otro favor Laulia?, ¿le echas otro vistazo a mi blog?, porque noto que la columna del medio esta hacia la derecha, no esta centrada, osea, que esta muy separada del sidebar de la izquierda (que es el original), yo, añadi, al newsidebar (el de la derecha) un margin-$starside:2%, a ver si asi, la columna del medio se separaba hacia la izquierda, osea se acercaba al otro, pero, ni por esas, ¿Que puedo hacer?.
    Un abrazo Laulia. P&P

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.