New Background Image on each page reload - html

Question

How can I display a new background image on each page refresh on a website (using Wordpress if this helps anything)? I would also like to take into account different screen resolutions, and proper handling for this. Any help would be greatly appreciated.

Answer 1

Have you seen this page in the wordpress codex?
It explains how to rotate the header image. It shouldn't be too hard adapt it for your needs.

Answer 2

Just have your own script that randomly returns pictures each time it is accessed. I have one that I wrote in C at the URL below that returns a different pic each time.
http://www.scale18.com/cgi-bin/gpic

Answer 3

You can generate it in realtime with GD library

Answer 4

To detect screen resolution, you can use client-side javascript
screen.height
screen.width
To display a different image, you could probably use a script to generate a random number and display the image that ties to it...?
You could store the "current" imaage in the session and just check each time you generate a new random number, that it's not going to display the last....

Answer 5

This is what I use with Wordpress to randomly rotate the header images on my site.
Someone else wrote the code and I can't remember who. Put the php code below into a file named rotate.php, and then put rotate.php into the directory of images that are to be rotated (i.e. "headerimages"), and rotate.php will draw from them. Call rotate.php from your CSS style sheet in whatever DIV is used for your headerimage.
I don't understand what you mean by being able to handle different screen resolutions. End user screen resolutions?
<?php
/*
Call this way: <img src="http://example.com/rotate.php">
Set $folder to the full path to the location of your images.
For example: $folder = '/user/me/example.com/images/';
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = '.';
*/
$folder = '.';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = #imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>

Answer 6

JavaScript is probably your best bet for this one.