Random Images using CSS files

[mpooleman]

I'm wanting to use a random image for the header on my webpage, but i've used a CSS file with the following for the Header:

#header{
background-image: url(images/header.jpg);
height: 400px;
width: 800px;
left: 0px;
top: 0px;

then just display it in the main page code.

Any Help??

cheers

Mark

[JackyBrown]

generate css file using php

[johnkayjay1]

yeah use php to generate css

[Bruce_KD]

A few things to be cautioned about if you're going to use php in the file.

First, if its going to be an external .css file (instead of just <style> tags in the main file), you'll need to plop this into your .htaccess file (assuming you're on linux)

AddType application/x-httpd-php .css 

This allows you to use the .css extension, but the server parses the php code inside.

Second, Some browsers cache .css files, so it would just download the file once and use it for every page. This would cause the image to not be random.

You can solve this a few simple ways.
First, you could add a random parameter to your css link

<link href="p/style.css?rand=<?=rand(1,100000)?>" rel=stylesheet type=text/css>

That forces the browser into thinking the css file is new every single time.

The second option is just putting your random header code inside of <style> tags inside of your main file.

Both of these options involve using php in your main page. Unless you'd like to rename your file <whatever>.php, you can put the embed php line in your .htaccess file:

AddType application/x-httpd-php .html 

(If you're using .htm extension, change the .html to .htm)

And if you're unfamiliar with php, here is a sample of how you could randomize your header image.
First, name the headers header1.jpg, header2.jpg, header3.jpg, etc

Next, use this in your css:

<? 
//Change the "4" to the number of headers you have uploaded in the images folder as header#.jpg
$headers = 4;
#header{
    background-image: url(images/header<?=rand(1,$headers)?>.jpg);
    height: 400px;
    width: 800px;
    left: 0px;
    top: 0px;
}

Bruce