En esta, he escrito un pequeño código de fondo aleatorio, imagen aleatoria o random backgrounden vanilla js, es compatible con cualquier navegador y versión.
Instalación
En este aporte se sobreentiende que ya cuentas con un header o algo similar y lo único que deseas es que la imagen "cover" sea aleatoria cada vez que el usuario refresque la pagina.
Este aporte sirve para cualquier página, solo tomare como referencia blogger. Ve a Temas, Personalizar, opciones avanzadas, CSS Personalizado y agrega el siguiente código:
/*!
* Random background
* by zkreations
*/
.headCover__random {
background-size: cover;
background: rgba(0,0,0,.5); /*color del fondo*/
background-position: center top; /*posicion del fondo*/
}
.headCover__random,
.headCover__random--img {
width: 100%;
}
Ya tenemos el código css que se encargará de que nuestros fondos mantengan una buena posición. Ahora vamos a ir a Temas, presionamos el botón "Editar HTML" y buscamos
</body>, arriba de eso pegamos lo siguiente:<script>//<![CDATA[
//! Random background | by zkreations
var fondos = [
"https://i.imgur.com/OQRarsN.jpg",
"https://i.imgur.com/DUyPrOo.jpg",
"https://i.imgur.com/CAOj6VR.jpg"],
random = Math.floor(Math.random() * fondos.length),
image = document.querySelector(".headCover__random--img"),
background = document.querySelector(".headCover__random");
if(background !== null){
background.style.backgroundImage = "url(" + fondos[random] + ")";
}else{
image.src = fondos[random];
}
//]]></script>
Lo importante del código anterior es reemplazar los fondos que especifiqué por los suyos. Si deseas agregar más fondos simplemente duplica el código de la primera imagen tantas veces como sea necesario. Ejemplo:
var fondos = [
"nueva-imagen-3.jpg",
"nueva-imagen-2.jpg",
"nueva-imagen-1.jpg",
"https://i.imgur.com/OQRarsN.jpg",
"https://i.imgur.com/DUyPrOo.jpg",
"https://i.imgur.com/CAOj6VR.jpg"],
Por último solo necesitamos especificar el elemento al cual afectará javascript. para ello buscan su propio header y le agregan la class
headCover__random. Ejemplo:<div class='myHeader headCover__random'></div>
En el código anterior estoy simulando un header con la clase "myHeader" y lo único que hice fue agregar la class
headCover__random mediante un espacio.Etiqueta IMG aleatoria
Además de agregar un fondo aleatorio mediante estilos, también se puede utilizar una etiqueta
<img/>. Para ello agrega la siguiente etiqueta de imagen en donde desees el fondo aleatorio:<img class='headCover__random--img' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
A esa etiqueta le he especificado la clase "headerCover__random--img" y además le he agregado una imagen transparente de 1px mediante base64, de esa forma no cargamos imagenes por gusto y evitamos también tener la etiqueta vacia.
Recomendaciones
Puedes agregar tantos headers como quieras, pero recomiendo no agregar demasiados, porque para tus usuarios no sería bueno tener que descargar imagenes nuevas cada vez que te visiten. Tambien recomiendo comprimir tus imágenes sin perder calidad, de esa forma tendrás headers bonitos y facil de "digerir" para tus visitantes.
