Arts numériques

Pour réaliser ce petit code, nous avons besoin d’un dossier contenant des images, placé dans le site.
Dans cet exemple, il est nommé "backgrounds", àl’intérieur d’un dossier "images".

Récupérer la liste des images disponibles

Pour disposer de la liste des images, on utilise la fonction glob :

$liste=glob("images/backgrounds/*.{gif,png,jpg,jpeg}", GLOB_BRACE);

cette fonction crée une variable tableau contenant la liste des éléments correspondants àla définition donnée dans la première partie des arguments. l’étoile (*) veut dire "n’importe quel caractère en n’importe quel nombre". Les accolades permettent de prévoir plusieurs variantes, si on a ajouté l’argument GLOB_BRACE dans la fonction.
La définition que nous donnons àglob est donc : "les fichiers terminant par l’extension .gif ou .png ou .jpg ou .jpeg se trouvant dans le dossier backgrounds situé dans le dossier images".

Choisir au hasard un fichier

Pour tirer au sort une des images, on demande àla fonction php rand de faire le travail

$alea=rand(0,count($liste)-1);

On stocke donc dans la variable $alea un chiffre entre zéro et le nombre d’éléments dans la liste moins 1. Pourquoi ? Parce que dans une liste de 6 éléments, le premier est l’élément 0, le dernier est l’élément 5. Il nous faut donc tirer au hasard un chiffre entre 0 et 5.

Ecrire le nom de l’image au bon endroit

Il nous reste a écrire le tag avec une balise style àl’intérieur. C’est echo() qui s’en charge :

echo "<section id='big-background' style='background-image:url(".$liste[$alea].")'></section>";

Le code complet avec sa CSS

Le code PHP

<?php
$liste=glob("images/backgrounds/*.{gif,png,jpg,jpeg}", GLOB_BRACE);
$alea=rand(0,count($liste)-1);
echo "<section id='big-background' style='background-image:url(".$liste[$alea].")'></section>";
?>

CSS

#big-background {
    height:80vh;
    background-color:#ddd;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}