disign | CSS: immagine di background random | a digital sign for a best design!
A digital sign for a best design

Articolo stampato da http://disign.improntedigitali.it/css-immagine-di-background-random-470-3-1.html

© Luca Frassineti

Css tips and tricks 5.878 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;
}

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 




Questo sito è totalmente privo di pubblicità, se volete sostenere questa inziativa, potete scegliere di fare una piccola donazione libera:



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