New Background Image on each page reload

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.

Related posts

Leave a Reply

6 comments

  1. 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….

  2. 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);
        }
    }
    
    ?>