Change page background image on refresh/reload

[peten]

Hi .

I am trying to work out how to make the background image on the pages of my clubs new web site change on page refresh or reload ,

I have the present background image set in the site wide css file
".body {
background-image:url('Art/imgp0196.jpg');
background-repeat:no-repeat;
background-position:right top;
} "

I have seen various methods using javascript but am unclear how to combine this method into the css system as i want the effects to be site wide and dont want to duplicate code all over the site .

Thanks Pete

[Matthew1980]

Hi there peten,

Welcome to WebmasterWorld!

This can easily be achieved by using php, and a defined array of image names, then in the page code just use a direct style="" tag within the body tag, and echo out a custom function that will randomise your images per page load, then this way at least you avoid using js, as not all people use it or have it enabled, and as php is server side, it makes life easier.

Hope that makes sense.

Cheers,
MRb

[peten]

Hi

Right i am not a good php script scribe so i have found a script that looks like it will do the job but not too sure how to adapt it to my needs the script is as follows
"<?php /*** Random Background Images

This file will display a random background image to any element targetted through a CSS id.

1) Place this file in the same location as your sites main stylesheet file.

2) In the head section of each page place the following @import statement.

@import url(/path/to/dynamic_css.php)

NOTE: the import must occur after all other style sheet links, imports and declarations to avoid this dynamic style being over-written.

3) Create a folder to hold the images to be used for the random backgrounds.

4) Assign values to the following variables to complete the setup

$imgFolder : the path from the sites root to the image folder created at 3 above example:

$imgFolder = "/images/random-images/";

$element : the css ID of the element to apply the background image to example:

$element = "header";

5) That's it! ***/

// Set up
$imgFolder = "/Art/autoimages/"; // the path from the sites root to the image folder created at 3 above
$element = "qmc.css"; // 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;
}
?>

"
now all my css is in an external file called qmc.css which i refere to on each web page but i do not really want to have to change any more on the pages (there are too many of them ) i need assistance in modding if possible ##


Thanks Pete .

[edited by: alt131 at 2:25 am (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]