disign.it | CSS: immagine di background random | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 4.148 visualizzazioni

CSS: immagine di background random

07/06/2013

Incrociando il linguaggio php con i fogli di stile possiamo facilmente randomizzare l'immagine di background della pagina.

L'esempio che presento può essere arricchito attraverso la realizzazione di un ulteriore dinamicità che può esser determinata dal gestire le immagini da far ruotare con una tabella del DB, amministrabile dal cliente, rendendolo così in grado di aggiungere e sostituire periodicamente le immagini.

Naturalmente trattandosi di immagini di sfondo per una buona visualizzazione occorre che tali immagini siano predisposte a dimensione e qualità sufficienti.

 

La parte in php è la seguente:

 

$bg = array('img01.jpg', 'img02.jpg', 'img03.jpg', 'img04.jpg', 'img05.jpg', 'img06.jpg', 'img07.jpg' ); // array delle immagini da utilizzare alternativamente
$i = rand(0, count($bg)-1); // genera numero random sulla base della dimensione dell'array
$back_sel = "$bg[$i]"; // imposta la  variabile sulla base del numero random

 

La parte CSS sarà di conseguenza la seguente:

 

body {
background: url(<?php echo $back_sel; ?>) no-repeat;
}

← Eseguire una PHP Function su ogni Item di un Array Javascript: immagine non trovata →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.