Imágenes al azar en el fondo del blog

21 de agosto de 2009 89 comentarios ,
Para aquellos que quieren tener siempre un fondo diferente en el blog pueden usar este truco que hará que cada vez que alguien entre al blog o se recargue la página cambie la imagen de fondo del blog.

Sólo tienes que entrar a Plantilla | Edición de HTML y pegar antes de </head> lo siguiente:
<script>
var banner= new Array()
banner[0]="URL de la imagen"
banner[1]="URL de la imagen"
banner[2]="URL de la imagen"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #FFFFFF url("' + banner[random] + '"); background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>

Ya sólo agrega las URL de las imágenes donde se indica. Si deseas agregar más imágenes puedes hacerlo repitiendo la línea:
banner[3]="URL de la imagen"
Tomando en cuenta el orden consecutivo del número.
Si agregas más imágenes cambia el número que se encuentra en:
3*Math.random()

Te recomiendo que uses imágenes pequeñas para que la carga de la página sea más rápida.
En el sitio Squidfingers puedes encontrar muchos patterns (patrones) de imágenes que puedes usar para tu blog.
Puedes ver un ejemplo funcionando en este blog de pruebas, sólo presiona la tecla F5 y verás que al recargarse la página cambiará la imagen de fondo del blog.

Para saber cómo cambiar el color de fondo del blog aleatoriamente visita este artículo.


89 comentarios en:

" Imágenes al azar en el fondo del blog "

  1. Hola El Potro™, hace varios días que paseo por tu blog y la verdad, está de lo más divertido ^_^

    Me pregunto si querrías hacer un intercambio de links con
    el balcón. También es un blog de ayuda blogger =D

    Espero tu respuesta. ¡¡Saludines!!

    ResponderEliminar
  2. Por supuesto Jaime, para mí es un honor.
    Lo que necesites estoy a tus órdenes. Ya te he agregado.

    Saludos.

    ResponderEliminar
  3. El Potro™, ¡muchísimas gracias por incluirme! Ya te agregué a mis sitios amigos. ^_^

    ¡Saludos!

    ResponderEliminar
  4. hola el potro no se si te diste cuenta cuando entrate a mi blog que tengo una caja para ingresar a blogger desde ahi mi problema es que la tenia por que no se veia la navbar pero ahora ya lo solucione y quiero quitar esa caja sabes como puedo hacerlo el post donde lo decia lo encontre en tu blog pero lo estuve buscando mucho tiempo y no lo encontre saludos
    ah y una ultima pregunta ¿por casualidad tienes trucos para metroflog?? espero que puedas ayudarme con este problema

    ResponderEliminar
  5. hola el potro wuju por fin solucione mi problema yo solo ia no necesite ayuda esta vez pero gracias por los exelntes trucos que tienes en tu pagina

    ResponderEliminar
  6. Hola It's Notice,

    Qué bueno que ya lo solucionaste. De Metroflog no sé nada, ni siquiera tengo una cuenta ahí =S

    Saludos.

    ResponderEliminar
  7. Hola bro! además de felicitarte por este nuevo truco, quiero hacerlo por como te ha quedado el "Elige cómo estar cerca de la Ciudad"

    La verdad que esta muy bonito... es mas, es una gran solución para evitar hacer lo que tuve que modificar en mi blog. Si se me hubiese ocurrido antes, no tendría que haber agregado las sidebars extras.

    Este blog cada día me gusta mas!!!!!!!!!!


    Un abrazo!!!

    ResponderEliminar
  8. Hola brother,

    Muchas gracias por tus comentarios, la verdad es que tenía muy disperso los feeds y el correo, así que mejor lo uní todo en uno, aunque no me gustaron los botones que hice =P ya cuando regrese de vacaciones haré otros con más tiempo, y por qué no, hasta un par de diseños para que todos puedan usarlos.

    Las columnas que agregaste de cualquier forma son útiles, ya si más adelante te estorban las eliminas y cuando tengas otra blogger-depresión las agregas de nuevo, jaja.

    Un abrazo.

    ResponderEliminar
  9. ola potro oie muy buenos post, una pregunta, se puede poner un index en el blog? de antemano gracias

    ResponderEliminar
  10. Hola Jonathan,

    No sé a qué te refieras con index. En Blogger el gadget de etiquetas y el de archivos del blog funcionarían como un índice.

    Saludos.

    ResponderEliminar
  11. Jajajajajajaja!!! esto de vincular el estado de ánimo con el blog creo que no va a ser buena idea... Si sigo así, voy a tener que pagar a alguien, pero no para que me haga los post, sino para que todos los dias me modifique la plantilla. jajajajja.

    La verdad que no sabía que los botones los habías hecho tu. Si es así, tengo que felicitarte también por eso, ya que te han quedado muy bonitos.

    Un abrazo!!!!

    ResponderEliminar
  12. jajaja, se va a poner de moda la blogger-terapia, pero si le vas a pagar diario te vas a ir a la quiebra, jaja.

    Un abrazo.

    ResponderEliminar
  13. Jajajajajajjajajajaja!!!!!

    Es verdad, voy a tener que ir pensando de donde sacaré tanto dinero!! ;)


    Un abrazo!!!!

    ResponderEliminar
  14. hola! sabes que me gustaria poner un banner aleatorio en mi pagina, estube viendo el codigo fuente de la pagina prueba y copie el codigo random, solo que no se si hay que pegarlo en el HEAD y llamarlo luego en el lugar que quieras. si es asi, como lo llamo? gracias! juanolivi@gmail.com lo necesito enseriO! :(

    ResponderEliminar
  15. Hola MundoPelicula©,

    Si quieres que las imágenes cambien al azar usa este tutorial:
    Banner aleatorio

    Ese tutorial está pensado para hacer cambiante la cabecera del blog pero también puedes usar el mismo código para un banner cambiante.

    Saludos.

    ResponderEliminar
  16. Hola Potro.

    ¿Sabes si es posible que la imágen de fondo del blog cambie al hacer click sobre otra Entrada y tener así un fondo de blog diferente y específico para cada Entrada?

    Mil gracias

    ResponderEliminar
  17. Hola ABRIL,

    Al hacer click sobre una entrada cambiará al azar la imagen de fondo, pero será al azar, no una imagen específica para cada entrada o viceversa.

    Saludos.

    ResponderEliminar
  18. Hola, amigo la verdad que desde que cree mi blog este es el truco que he mas buscado por que lo ne cesito... y siempre no me funciona....

    1: Las imagenes se ven pero nomas cuando le doy a Vista PRevia pero luego se quita
    2: Dices que es de fondo verdad pues la imagen me salen en el fondo de las entradas osea no atras. como por ejemplo
    3djuegos.com si me ayudaras a terminar con esto Pues no se seria muy beuno XD

    ResponderEliminar
  19. Hola RD-JUEGOS,

    Imposible que se vea en Vista previa, ya que ningún script (como en este caso) funciona en la Vista Previa sólo guardando los cambios.
    En tu blog no funciona por el tipo de plantilla que tienes, ahí no creo que haya nada que se pueda hacer =(

    Saludos.

    ResponderEliminar
  20. Hola El Potro!! Excelente blog ^^
    Llegué aqui buscando algo parecido a lo que explicas... verás, me gustaría que el fondo cambiara automáticamente por horas (por ej, por la noche el fondo es de estrellas, de día hay un amanecer... cositas así), ¿crees que se puede hacer?

    Saludos!!

    ResponderEliminar
  21. Hola Nazareth,

    Desconozco si haya un script que permita hacer eso. Si encuentro alguna información te comento.

    Saludos.

    ResponderEliminar
  22. He seguido las instrucciones, pero no resulta. Debo hacer algo más?

    ResponderEliminar
  23. En esta parte de tu plantilla:

    body {
    background: #000000 url(http://img706.imageshack.us/img706/6171/backgroundredt.jpg) repeat-x top center !important;

    Tienes la declaración !important, eso significa que no hará caso a ningún otro cambio sino que ese fondo con esas propiedades será el que tendrá siempre.
    Para que el script pueda tener la facultad de poder cambiar el fondo tendrías que quitar esa declaración.

    ResponderEliminar
  24. Muchas gracias, ahora funciona el cambio al azar. Sin embargo, el fondo se repite, cómo puedo cancerlar aquello para que sólo se muestre una imágen.

    ResponderEliminar
  25. Busca esta parte:
    document.write(' background: #FFFFFF url("' + banner[random] + '"); background-attachment:fixed;');

    Y cámbiala por esta otra:
    document.write(' background: #FFFFFF url("' + banner[random] + '"); background-attachment:fixed; background-repeat:no-repeat;');

    Ahí mismo verás el código del color de fondo en blanco (#FFFFFF) puedes cambiarlo por otro si quieres.

    ResponderEliminar
  26. Oh! muchas gracias, queda de maravilla.

    ResponderEliminar
  27. Hola Potro.. Mira.., yo no puedo cargar xq me da el siguiente error:
    "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "tw" must end with the ';' delimiter."
    Me podrias ayudar?? Muchas gracias..

    ResponderEliminar
  28. Posiblemente es por la URL del enlace de tu imagen. Necesitaría ver cuál estás usando para ver si es ese el problema.

    ResponderEliminar
  29. Exacto.., ese era el problema.. Todo solucionado.. Muchas gracias Potro!!

    ResponderEliminar
  30. y como le ago para que no se pongan en mosaico?

    ResponderEliminar
  31. Busca donde dice background-attachment:fixed; y justo después de eso agrega esto:
    background-repeat:no-repeat;

    ResponderEliminar
  32. Hola, como ago para que solo cambien la imagen de cabecera, nose si me explico, no quiero que cambie el fondo del blog.

    Saludos

    ResponderEliminar
  33. Nunca lo he probado para la cabecera así que no sabría decirte con exactitud, supongo que dependerá mucho del tipo de plantilla que tengas.

    ResponderEliminar
  34. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  35. Muy bueno esto es lo que buscaba a mi pregunta en el otro post pero en vez de imágenes quiero fondos de colores para hacer larga la carga del blog.

    ResponderEliminar
  36. Hay otro que en lugar de imágenes es con colores:
    http://ciudadblogger.com/2009/01/color-de-fondo-del-blog-aleatorio.html

    ResponderEliminar
  37. Potro ya lo hice, solo que quiero que las imagenes se desplazen junto con la pagina osea que no esten fijas, y tanbien quiero que no se repita y esten centradas, como le hago..

    ResponderEliminar
  38. Cambia esta parte del script:
    background-attachment:fixed;

    Por esta:
    background-repeat:no-repeat; background-position:center;

    ResponderEliminar
  39. Gracias El Potro, Tu nunca me fallas, oyes una cosa mas no se le podria dar un color de fondo a cada imagen, esque cada imagen tiene diferente color... espero tu respuestas, Saludos!!!

    ResponderEliminar
  40. En primer lugar te felicito por tu excelente blog y gracias por compartir todo tu conocimiento con nosotros. Tengo una pregunta como podría poner un fondo al azar solo en las entradas...? y en la pagina principal uno fijo..

    ResponderEliminar
  41. Hola DJBrown,

    Sí se puede, sólo encierra este código dentro de una condicional para que sólo se ejecute en las entradas individuales.

    ResponderEliminar
  42. Muchisimas gracias potro quedo excelente en la pagina de mi novia para los q lo quieran ver aquí esta el enlace: http://princesakaom.blogspot.com/

    De nuevo muchisimas gracias eres un genio amigo.

    ResponderEliminar
  43. Que tal potro, disculpa como podria poner un GIF animado de fondo del blog, pero que quedara Completo de todo el fondo.

    el GIF que tengo mide 500x550 y quiero que lo ajuste a todo el fondo del blog.

    este es la parte de mi plantilla donde va la imagen:


    background-image: url(DIRECCION DE LA IMAGEN);
    background-attachment: fixed;
    background-position: bottom left;
    background-repeat: repeat-x;
    border-color:#ffffff;
    border-width:0px ;
    border-style: solid;


    Te agradezco tu tiempo !

    ResponderEliminar
  44. Hola Leonardh.

    Que la imagen se ajuste de forma completa no hay manera con CSS, eso depende del tamaño de tu imagen. Lo único que puedes determinar es si la imagen se repite o no. En el código que has puesto se modificaría aquí:

    background-repeat: repeat-x;

    Ese repeat-x indica que se repetirá verticalmente. Si le pones sólo repeat indicará que se repetirá en todo el fondo, y si le pones no-repeat entonces la imagen no se repetirá.

    Saludos.

    ResponderEliminar
  45. Que tal Potro, es un gusto saludarte, necesitaba preguntar sobre una duda respecto del fondo o background del blog pues el que yo uso no se adapta o mejor dicho no se ajusta automaticamente cuando entro en una laptop el fondo se deforma, solamente en las PCs con monitores mas angostos sale bien, y en las Laptop se deforma habra alguna manera o truco para lograr que se ajuste solo en los diferentes tipos de monitores o pantallas?

    esta es la seccion de mi plantilla donde va el background:

    background-image: url(http://i.imgur.com/px5Pi.jpg);
    background-attachment: fixed;
    background-position: bottom center;
    background-repeat: repeat-x;
    border-color:#ffffff;
    border-width:0px ;
    border-style: solid;

    ResponderEliminar
  46. Hola Leonardh.,

    Qué gusto verte de nuevo por aquí.
    Ese es el problema con ese tipo de imágenes como fondo, como el monitor del usuario puede ser diferente entonces no siempre se verá igual. Es por eso que siempre se usa mayormente un fondo de tipo "pattern".

    Saludos.

    ResponderEliminar
  47. muchas gracias por la informacion Potro, es verdad lo que me comentas por eso en Otro blog que hice sobre mi trabajo estoy usando solo pattern o patrones para los Fondos, en realidad seguido estoy por aca en ciudad blogger porque necesito seguir consultando los tutoriales pues me gusta bastante seguir haciendo modificaciones en mis blogs (un blog para el relajo y el otro de mi trabajo) incluso la tabla de colores la uso muy seguido asi que soy un autentico residente de ciudad blogger jejejeje, y pues te deseo Paz y mucha Salud pues ya se viene el fin de año y hay que ir guardando energia paraa festejar en grande jejejeje hasta pronto Bye!!

    ResponderEliminar
  48. Habrá que tramitar entonces tu cambio de domicilio en el IFE para que ahora aparezcas residente de Ciudad Blogger, jajaja.
    Gracias por tus deseos, el triple de ellos para ti :)

    ResponderEliminar
  49. Buenas de nuevo Potro!

    Genial post, lo buscaba.
    He puesto 6 imágenes, que no se repita el fondo, que se muevan al bajar (no fijas) y centradas.
    Todo genial, pero las imágenes me han quedado demasiado arriba y se a comido como 1 dedo de fondo:
    www.mariavalverdefansclub.com

    Como puedes ver, las bolas no se muestran enteras y también se tiene que mostrar algo de blanco.

    Un saludo!
    GRACIAS DE NUEVO!

    ResponderEliminar
  50. Hola de nuevo LorkDesigns,

    Prueba agregar ahí mismo en los estilos del fondo un margen, es decir, después de:
    background: #FFFFFF url("' + banner[random] + '"); background-repeat:no-repeat; background-position:center; background-repeat:no-repeat;

    Agrega esto:
    margin-top:40px;

    Dime si con eso funciona.
    Saludos.

    ResponderEliminar
  51. Hola Potro, dejalo, cancelo mi comentario anterior.
    Quitare esta opción porque depende que resolución de pantalla y navegadores, se mueve el fondo y no queda centrado como tenia pensado.

    ¡Gracias!

    ResponderEliminar
  52. Por cierto, lo he probado, y lo único que a hecho a sido bajarme la imagen de "En Construcción", y no el fondo (pero ya no lo necesito).

    Cambiando de tema, ¿cabe la posibilidad de cambiar el color de la zona gris de abajo la web, del pie de pagina? Me gustaría cambiarle a un azul o otro tipo de gris. Un saludo!!

    ResponderEliminar
  53. Sí, sí es posible. Busca esta línea y elimínala:
    background: $(footer.background);

    En su lugar pon esto:
    background: #FFF;

    Con eso le cambiarás el color de fondo al footer.
    Saludos.

    ResponderEliminar
  54. Saludos Potro, disculpa sera posible mostrar en la portada del blog una imagen de fondo y en el resto del blog otra imagen distinta ?

    ResponderEliminar
  55. Hola Leonardh yo ya había preguntado lo mismo búscalo un poco mas arriba....

    ResponderEliminar
  56. Leonardh., si es usando este método entonces mira la respuesta que le di a DJBrown más arriba. Si es sin este método entonces en el body de tu plantilla pon la imagen que quieres para el resto del blog, luego antes de </head> agrega una condicional con los estilos que quieres para la portada:


    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style>
    body {background:#FFF url(URL de la imagen) !important;}
    </style>
    </b:if>

    De esa manera el blog tendrá un fondo que sólo se aplicará a la portada del blog, en las demás páginas se verá el que estableciste por defecto.

    ResponderEliminar
  57. gracias DJBrown, Excelente Potro, preferi usar este codigo que has dejado ya solo agregue los estilos de mi blog y quedo perfecto...!!! muchisimas gracias !
    Saludos.

    ResponderEliminar
  58. Potro ai alguna manera de poner dos imagenes de fondo que cambien cara 5 segundos o algo parecido?
    Como el escritorio de la computadora
    -Gracias

    ResponderEliminar
    Respuestas
    1. ¿Como fondo del blog? Mira esta entrada de Gema:
      http://www.gemablog.com/2012/01/slideshow-para-fondo-del-blog-css3.html

      Eliminar
  59. Hola, lo he hecho con 3 imágenes pero como no se nada de códigos html, quisiera saber como se hace para centrarlas y que se traslade con la página, quisiera saber el código y en que posición del código html deberia ponerlo, gracias.

    ResponderEliminar
    Respuestas
    1. Hola goku6384, en los fondos de nada sirve centrarlo porque la imagen se repetirá, y si le pones la indicación de que no se repita entonces habrá partes vacías y el resultado no será muy bueno que digamos.
      Si quieres que no sea fijo el fondo entonces quita esta parte:
      background-attachment:fixed;');

      Eliminar
    2. Lo hice y se me quedo el fondo sobrepasando el Top y apenas se veia, pero bueno habra que apañarselas jeje.

      Por cierto yo visito frecuentemente una página y allí el fondo se cambia entre mañana, tarde y noche , asi que tiene que haber una forma de que se cambien importando horarios no?

      Eliminar
    3. Supongo que debe poderse. No estoy seguro, pero parece que alguna vez en El balcón de Jaime publicaron algo así, pero no me creas ya que no estoy del todo seguro.

      Eliminar
  60. una pregunta se podria aplicar el efecto de http://ciudadblogger.com/2012/08/hacer-que-la-imagen-de-fondo-del-blog-cubra-toda-la-pantalla.html con este

    ResponderEliminar
  61. Hola potro, soy un seguidor tuyo. Tengo un problema en mi blog http://clubgaysweb.blogspot.com.es/ es que este tipo de bondo no quiero que afecte al fondo blanco sino al fondo donde estan los chicos. Y si en todo caso que solo se pueda al fondo completo como podria dejarlo solo en la portada permaneciendo en las entradas el blanco.
    Gracias,

    ResponderEliminar
    Respuestas
    1. Hola Carlos, el fondo del blog se aplica a todo el fondo del blog, es decir, al fondo dentro de body {
      El fondo de tu blog en realidad es blanco, la imagen de los chicos no es el fondo del blog sino el de un contenedor, ahí no aplica este truco.

      Eliminar
  62. Hola, tengo una duda como consigo la url de las imágenes.

    visit: ogltheathor.blogspot.com

    ResponderEliminar
    Respuestas
    1. En esta entrada puedes ver cómo se hace:
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Eliminar
  63. Saludos El Protro. Gracias por compartir tus conocimientos. Busco (sin éxito hasta ahora) algo parecido, un cambio de fondo en interiores pero sin que sea al azar. Es decir, busco una pagina de inicio o principa, pero al al clicar cualquier nota cambie a otro fondo, y al regresar a pagina de inicio continúe con el fondo principal.
    Ojalá me puedas ayudar, y muchas gracias por tu exoeriencia.
    PD
    Este pagina es casi la que quiero, pero sin que sea al azar y sólo 2 fondos, el principal y uno general para interiores.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola. Puedes usar condicionales para dicho efecto, de modo que en la portada usarías un fondo y en el resto del blog otro. Sería poniendo antes de </head> esto:

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <style>
      body {
      background: #FFF url(URL de la imagen);
      }
      </style>
      </b:if>

      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <style>
      body {
      background: #FFF url(URL de la imagen);
      }
      </style>
      </b:if>


      La primera parte del código sería para el fondo en la portada, y la otra parte sería para el fondo en el resto del blog.

      Saludos.

      Eliminar
    2. DE VERDAD, MUCHAS GRACIAS EL POTRO POR TU VALIOSA AYUDA, PRIMERO POR SER UN APASIONADO DE LA PROGRAMACIÓN, Y SEGUNDA PORQUE NUNCA CREÍ QUE ME CONTESTARAS, Y ME RESOLVISTE EN UNAS HORAS UN DOLOR DE CABEZA :)
      MUCHAS GRACIAS
      TE GANASTE MI MODESTA DONACIÓN
      SALUDOS

      Eliminar
    3. Al contrario, muchísimas gracias a ti por tu generosidad. En serio, gracias.
      Saludos!

      Eliminar
  64. Hola Potro! Ya lo tengo aplicado y queda genial. Muy efectivo. Tenia una duda en la que quizas me puedas echar una mano. Cuando diseño imagenes por ejemplo en pickmonkey y les pongo transparencia. Luego las llevo al blog y se ve ese fondo que deberia ser transparente se ve blanco. Lo puedes ver en http://trebol30.blogspot.com.es/p/casino.html por ejemplo. Seguro que es una tonteria pero me lleva loco.
    Gracias de antemano Crack!!!!!!!

    ResponderEliminar
    Respuestas
    1. Hola liquido, entré pero no he visto ningún fondo blanco en las imágenes, supongo que has sabido resolverlo.

      Pd. Elimino el comentario por lo que te decía en el comentario anterior.

      Saludos.

      Eliminar
  65. Hola El Potro:
    Descargué una plantilla Anime Note y las imágenes de fondo de esta plantilla funcionan muy bien, pero cuando pongo los links míos no aparece nada. En el original son 10 imágenes y van muy bien, en el mío nada de nada a pesar que las he hecho con las medidas de cada foto de la plantilla original. ¿Qué debo hacer? ¿Por qué no estará funcionando? Plis, me ayudas. Saludos: Mery

    ResponderEliminar
    Respuestas
    1. Hola Mery, si puedes pon los links en tu plantilla tal como dices, luego cuando ya los hayas puesto dime en cuál blog lo has hecho para poder darle una revisada.

      Eliminar
  66. Magnífico tu blog. Buscando buscando llegué a este post y al otro que publicaste para la imagen del header. ¿podrías indicarme como podría hacer ese efecto en una foto fija de la home? La web que tiene ese efecto y quiero hacer igual es: tartinebakery.com.... Te agradeccería la ayuda.

    ResponderEliminar
    Respuestas
    1. Hola jose, gracias por tu comentario. Para lo que solicitas, sólo crea un gadget HTML/Javascript y dentro de él pega el código javascript que se menciona en esta entrada:
      http://www.ciudadblogger.com/2009/07/cabecera-del-blog-cambiante-al-azar.html

      Con eso tendrás un gadget en el cual cambian las imágenes al azar cada vez que se carga el blog.

      Eliminar
    2. ¿gadget?... Lo quiero en una web con wordpress 4, no un blog .com. Imagino que te refieres copiando el código HTML directamente en el contenido de la página...voy a probar. Gracias.

      Eliminar
    3. Solucionado....muchísimas gracias por la ayuda...

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger