[SOLVED] CSS Random Background Image Rotation

[keesjanisse]

Hi there,

 

I'm using next script to randomly load a background image through dynamic css:

 

// Set up

$imgFolder = "/images/random-images/"; // the path from the sites root to the image folder created at 3 above

$element = "header"; // the css ID of the element to apply the background image to

 

// That's it!! Nothing below this line needs to be changed

$img = null;

 

// build up the path to the image folder

if (substr($imgFolder,0,1) != '/') {

$imgFolder = '/'.$imgFolder;

}

if (substr($imgFolder,-1) != '/') {

$imgFolder = $imgFolder.'/';

}

$path = $_SERVER['DOCUMENT_ROOT'] . $imgFolder;

 

// populate an array to hold valid file type extensions

$extList = array('gif','jpg','jpeg','png');

 

// create an array to hold the list of image files

$fileList = array();

 

// open a handle to the directory

$handle = opendir($path);

 

// loop through the contents of the directory

while ( false !== ( $file = readdir($handle) ) ) {

// get the info for each file

$file_info = pathinfo($file);

// check that the file in in the allowed extensions array

if ( in_array( strtolower( $file_info['extension'] ), $extList)    ) {

// add the file to the array

$fileList[] = $file;

}

}

// close the handle to the directory

closedir($handle);

 

// if we have at least 1 file in the list

if (count($fileList) > 0) {

// select a random index from the file list array

$imageNumber = time() % count($fileList);

// assign the filename for that array index to the $img var

$img = $imgFolder . $fileList[$imageNumber];

 

$css = "#$element { background-image: url('".$img."'); }\n";

 

// tell the browser what we're sending

header('Content-type: text/css');

// and write out the css

echo $css;

}

?>

 

from: http://www.thought-after.com/2006/05/26/css-random-background-image-rotation/

 

I need some additional styling to the background image; I'd like to append next css to the backgroundimage

 

repeat-x top center #F2F9FD

 

as the original (static) css is: background: url(../images/header.jpg) repeat-x top center #F2F9FD;

 

HOW to implement this styling into the above script ?

 

TIA

RGRDS

Kees

[keesjanisse]

got the answer :

 

$css = "#$element { background: #f2f9fd url('".$img."') repeat-x top center; }\n";

 

grtz

Kees