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 diseos, distintos mensajes, etc.. Conseguirlo es muy sencillo combinando PHP y CSS. Supongamos que tenemos una serie de imgenes 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 lnea por lnea. Como vamos a introducir estilos dentro de Head escribiramos:
1 <style type="text/css" media="screen">

A continuacin abrimos php y creamos un nmero aleatorio utilizando PHP:

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

De esta forma creamos un nmero 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 imgenes en una array o matriz, y estas comienzan a contar desde cero. Por lo tanto como tenemos quince imgenes contaramos desde cero a catorce. Almacenemos nuestras imgenes en el array:
$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" , 1 "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 imgenes y ese array lo hemos almacenado a su vez en la variable $imagenes. Ahora vamos a escribir la lnea de CSS que va a crear el fondo para nuestra web, es decir, el fondo de body (cerrando a continuacin php y style):
1 echo "body{ background: #000 url('images/".$imagenes[$valor]."') no2 repeat top right fixed;}";

3 ?> </style>

Como estamos an con PHP la manera que utilizamos en PHP para escribir algo es a travs de echo. A continuacin sigue la instruccin 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 nmero 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. Aadimos la variable con un punto (que es la manera de aadir con PHP) despus de interrumpir con dobles comillas la instruccin normal de CSS para introducir PHP. Si seguimos con nuestro ejemplo el resultado ser:
<style type="text/css" media="screen"> 1 body{ background: #000 url('images/fondo_body4.jpg') no-repeat top right 2 fixed;} 3 </style>

Vamos a ver ahora todas las lneas que escribiramos dentro de head:
<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]."') norepeat top right fixed;}"; ?> </style>

1 2 3 4 5 6 7

Podemos refinar an ms nuestro cdigo. Qu pasa si de repente en vez de tener 15 imgenes queremos que sean 16? Que tenemos que cambiar el nmero en rand. No podemos hacer que se cuente de manera automtica el nmero de imgenes que hay en el array? Pues s se puede. Lo haramos as:
1 count($imagenes)

En nuestro caso nos dar un valor de 15, ya que hay 15 imgenes en el array. Para llevar esto a la funcin que crea el nmero aleatorio haramos:
1 $valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);

Vemos que a la funcin que nos cuenta el nmero de imgenes del array le hemos restado uno Por qu? Recordad que se comienza siempre contando desde cero. Si hay una sola imagen $valor tendra que ser cero (un nmero aleatorio entre cero y cero, saldra cero, que es la primera imagen). Ahora quedara todo as:
<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>

1 2 3 4 5 6 7

Fijaros en la instruccin que he includo en body. Por supuesto que podis cambiar como queris 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 pgina -fixed-)