Diseño web | Creación web | Emenia

Como utilizar un fondo aleatorio para nuestra web

Hay ocasiones en las que queremos que cada vez que entre un usuario a nuestra web el fondo de la misma sea elegido aleatoriamente. De esta forma podemos sorprender a nuestros usuarios con distintos diseños, distintos mensajes, etc..

Conseguirlo es muy sencillo combinando PHP y CSS.

Supongamos que tenemos una serie de imágenes para el fondo de nuestra web que se llaman: “fondo_body1.jpg” , “fondo_body2.jpg” , “fondo_body3.jpg” , “fondo_body4.jpg” , “fondo_body5.jpg”, “fondo_body6.jpg” , “fondo_body7.jpg” , “fondo_body8.jpg” , “fondo_body9.jpg” , “fondo_body10.jpg”,”fondo_body11.jpg” , “fondo_body12.jpg” , “fondo_body13.jpg” , “fondo_body14.jpg” y “fondo_body15.jpg”

¡Quince nada menos! De esta manera va a ser dificil que a un usuario le salga dos veces seguidas la misma imagen……

Vamos a ver línea por línea. Como vamos a introducir estilos dentro de Head escribiríamos:

1

<style type="text/css" media="screen">

A continuación abrimos php y creamos un número aleatorio utilizando PHP:

1
2

<?php
$valor = rand(0,14); // Uso de rand(): rand(Valor minimo, Valor maximo);

De esta forma creamos un número aleatorio entre cero y catorce y lo almacenamos en la variable $valor. ¿Por qué empezamos por cero? Porque ahora vamos a almacenar los nombres de nuestras imágenes en una array o matriz, y estas comienzan a contar desde cero. Por lo tanto como tenemos quince imágenes contaríamos desde cero a catorce.

Almacenemos nuestras imágenes en el array:

1

$imagenes = array("fondo_body1.jpg" , "fondo_body2.jpg" , "fondo_body3.jpg" , "fondo_body4.jpg" , "fondo_body5.jpg", "fondo_body6.jpg" , "fondo_body7.jpg" , "fondo_body8.jpg" , "fondo_body9.jpg" , "fondo_body10.jpg","fondo_body11.jpg" , "fondo_body12.jpg" , "fondo_body13.jpg" , "fondo_body14.jpg" , "fondo_body15.jpg");

Como veis hemos creado un array donde hemos almacenado todos los nombres de nuestras imágenes y ese array lo hemos almacenado a su vez en la variable $imagenes.

Ahora vamos a escribir la línea de CSS que va a crear el fondo para nuestra web, es decir, el fondo de body (cerrando a continuación php y style):

1
2
3

echo "body{ background: #000 url('images/".$imagenes[$valor]."') no-repeat top right fixed;}";
?> 
</style>

Como estamos aún con PHP la manera que utilizamos en PHP para escribir algo es a través de echo. A continuación sigue la instrucción de CSS que da el fondo a body pero con una peculiaridad: el nombre de la imagen que va a estar ocupando el fondo vendrá dado por las dos variables que hemos creado con anterioridad. Por ejemplo, si el número aleatorio es 3 tendremos $imagenes[3], es decir, escogerá el tercer valor del array comenzando por cero, que es fondo_body4.jpg. Hay que tener cuidado con las comillas. Añadimos la variable con un punto (que es la manera de añadir con PHP) después de interrumpir con dobles comillas la instrucción normal de CSS para introducir PHP. Si seguimos con nuestro ejemplo el resultado será:

1
2
3

<style type="text/css" media="screen">
body{ background: #000 url('images/fondo_body4.jpg') no-repeat top right fixed;}
</style>

Vamos a ver ahora todas las líneas que escribiríamos dentro de head:

1
2
3
4
5
6
7

<style type="text/css" media="screen">
<?php 
  $valor = rand(0,14); // Uso de rand(): rand(Valor minimo, Valor maximo);
  $imagenes = array("fondo_body1.jpg" , "fondo_body2.jpg" , "fondo_body3.jpg" , "fondo_body4.jpg" , "fondo_body5.jpg", "fondo_body6.jpg" , "fondo_body7.jpg" , "fondo_body8.jpg" , "fondo_body9.jpg" , "fondo_body10.jpg","fondo_body11.jpg" , "fondo_body12.jpg" , "fondo_body13.jpg" , "fondo_body14.jpg" , "fondo_body15.jpg");
  echo "body{ background: #000 url('images/".$imagenes[$valor]."') no-repeat top right fixed;}";
?> 
</style>

Podemos refinar aún más nuestro código. ¿Qué pasa si de repente en vez de tener 15 imágenes queremos que sean 16? Que tenemos que cambiar el número en rand. ¿No podemos hacer que se cuente de manera automática el número de imágenes que hay en el array? Pues sí se puede. Lo haríamos así:

1

count($imagenes)

En nuestro caso nos dará un valor de 15, ya que hay 15 imágenes en el array. Para llevar esto a la función que crea el número aleatorio haríamos:

1

 $valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);

Vemos que a la función que nos cuenta el número de imágenes del array le hemos restado uno ¿Por qué? Recordad que se comienza siempre contando desde cero. Si hay una sola imagen $valor tendría que ser cero (un número aleatorio entre cero y cero, saldría cero, que es la primera imagen).

Ahora quedaría todo así:

1
2
3
4
5
6
7

<style type="text/css" media="screen">
  <?php 
	$imagenes = array("fondo_body1.jpg" , "fondo_body2.jpg" , "fondo_body3.jpg" , "fondo_body4.jpg" , "fondo_body5.jpg", "fondo_body6.jpg" , "fondo_body7.jpg" , "fondo_body8.jpg" , "fondo_body9.jpg" , "fondo_body10.jpg","fondo_body11.jpg" , "fondo_body12.jpg" , "fondo_body13.jpg" , "fondo_body14.jpg" , "fondo_body15.jpg");
       $valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);
	echo "body{ background: #000 url('images/".$imagenes[$valor]."') no-repeat top right fixed;}";
?> 
</style>

Fijaros en la instrucción que he incluído en body. Por supuesto que podéis cambiar como queráis lo que he puesto yo (fondo negro -#000-, situado en la parte superior de la pantalla -top- en la parte derecha -right- y que no se desplace cuando nos desplazamos hacia abajo en la página -fixed-)

Más lecturas recomendadas

PHP.net – Arrays in PHP
Desarrolloweb.com – Creación de tablas por medio de variables tipo array. Utilidad y funciones útiles relacionadas.