Random de imágenes como fondo del blog

O lo que es lo mismo grupo de imágenes que cambian al actualizar la página.
Las imágenes que debemos buscar deben ser de gran tamaño o de lo contrario no ocuparían todo el fondo ya que el código contiene no-repeat para que las imágenes que no alcanzan a ocupar todo el espacio no se repitan.
Con attachment:fixed las fijamos al fondo. En background añadimos el color que será el que se aprecie mientras carga la página. En Math.random añadimos la cantidad de imágenes (5*Math.random)
A más imágenes más líneas de código debemos añadir aumentando progresivamente el orden numérico al mismo tiempo que aumentamos el valor en Math.random.
¿Dónde lo añadimos? justo antes de la etiqueta </head>.


<script type='text/javascript'>
var banner= new Array()
banner[0]="URL-de-la-imagen"
banner[1]="URL-de-la-imagen"
banner[2]="URL-de-la-imagen"
banner[3]="URL-de-la-imagen"
banner[4]="URL-de-la-imagen"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #000 url("' + banner[random] + '") no-repeat center top; background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>

Comprueba si funciona actualizando la página con la tecla f5.
No es extraño que las imágenes aparezcan también como fondo en la plantilla de diseño.
Dejo unas imágenes de la prueba que hice.








0 comentarios:

Publicar un comentario