Usar una imagen de fondo aleatoria al cargar una página web

Para darle un toque de estilo a la bitácora he usado unas cuantas texturas de fondo obtenidas de Subtle Patterns. Son unas imágenes con un patrón repetitivo de colores suaves y poco llamativos que podemos usar como fondo de una página web, son de libre uso respetando la licencia Creative Commons - Reconocimiento - Compartir igual. Podemos encontrar texturas en las siguientes categorías y motivos:

• Light
• Dark
• Paper
• Stripes
• Wall
• Fabric
• Noise
• Diamond
• Grid
• Carbon

En el momento de escribir este artículo hay 400+ texturas con diferentes patrones para temas claros, oscuros, … Como tenemos muchas podemos usar varias y hacer que se cargue una diferente de forma aleatoria cada vez que se visualiza una página variando un poco el estilo de la página cada vez que se carga. En el momento de escribir este artículo es lo que hago en Blog Bitix con el siguiente código JavaScript, puedes probar a recargar la página y verás que se carga otra textura de fondo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

define(['jquery'], function($) {
    // ...
    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    var spec = {
        backgrounds: [
           'confectionary.webp',
           'dimension.webp',
           'skulls.webp',
           'tree_bark.webp',
           'contemporary_china_2.webp',
           'eight_horns.webp',
           'swirl_pattern.webp',
           'upfeathers.webp',
           'contemporary_china.webp',
           'paisley.webp',
           'symphony.webp'
        ]
    };

    var i = random(0, spec.backgrounds.length - 1);
    var b = spec.backgrounds[i];
    $('body').css('background-image', 'url("assets/images/backgrounds/' + b + '")');
    // ...
});

Otra página que podemos para obtener una textura en este caso con ruido es Noise Texture Generator. Indicamos unos cuantos parámetros y podemos obtener la textura generada.

Si lo que queremos son fotos de buena calidad en la página en Unsplash se publican 10 fotos cada 10 días que también podemos usar libremente, deberemos tener en cuenta que como son fotos de alta calidad y en formato jpg ocupan bastante más y si las usamos en una web deberemos reducir su tamaño para que la carga de la página no se ralentice demasiado en conexiones lentas o consuma demasiados datos, también podemos usarlas como fondo de pantalla de nuestro escritorio.

Una buena textura o imagen pueden darle a una página un aspecto mucho más atractivo y si además hacemos que se use una diferente cada cierto tiempo o de forma aleatoria hacemos que la página sea algo diferente cada vez que se visualiza.