Cómo cambiar un fondo dinámicamente en un sitio web

Usando CSS y JavaScript, puede cambiar dinámicamente el fondo en su sitio web. Usted usa el código para cambiar el fondo cada vez que un usuario carga el sitio web en un navegador, y el código también funciona si el usuario actualiza el sitio web en la ventana del navegador. Debe tener las imágenes utilizadas en su fondo cargadas en su servidor, para que se muestren correctamente en el navegador.

1.

Haga clic con el botón derecho en la página HTML que desea editar y seleccione "Abrir con". Haga clic en su editor de HTML en la lista de programas.

2.

Cargue cada imagen en una matriz de JavaScript. Por ejemplo, el siguiente código crea una matriz de dos imágenes en el servidor host web:

var background = new Array (); background [0] = "/images/bg1.gif"; background [1] = "/images/bg2.gif";

3.

Generar un número aleatorio. El número aleatorio se utiliza para recuperar aleatoriamente una imagen de la matriz. En este ejemplo, se cargan dos imágenes, por lo que debe generar un número entre 0 y 1. El siguiente código genera un número aleatorio:

var numberGen = Math.floor (Math.random () * 1)

4.

Muestra la imagen de fondo de la matriz. El siguiente código combina la matriz de imágenes y el número aleatorio para mostrar una imagen aleatoria como fondo del sitio web:

document.body.style.background = 'url (' + background [numberGen] + ')';