Random Image Header


I was looking for a way to alter the image randomly on my WordPress weblog, but as the header image is called from a CSS file, I was unsure quite how to do it.

I am unsure no more !

PhotoMatt wrote a random image script, the details of which can be viewed here.
Although I use WP, this will work for any blog that has an image called from the CSS.

I did this;
– Created a folder on the server called ‘headers’
– Into that, I uploaded several different images that would suit as a header image.
– I saved the script above as a php file (call it what you will – mine is ‘rotate.php’) and uploaded into the same ‘headers’ folder.

Now I edited the CSS file.
In WP, there is a line in #header which can be used to specify a url for the image to be loaded. This needs a light alteration:

Mine was
#header {
background-image: url(image.jpg)

and it is now

background-image: url(headers/rotate.php);

Now, when the CSS is called, the background image is chosen randomly by the script. :smile:




  1. Onno (1 comments.) says:

    This is indeed a good script for rotating background images, but due to the caching methods of Mozilla and Opera, it only works in IE. (Haven’t checked the mac) Because the editing takes place in the stylesheet but doesn’t modify it FF assumes that the contents of the CSS file hasn’t been altered and serves you the cached image.

    There needs to be an inline style to prevent this effect, but that is also damaging the seperation of form and content..

  2. douglas (1 comments.) says:

    Any ideas where I can get the magic Matt script? I can’t seem to find it anywhere. OR, am I just missing something here?

  3. taka says:

    i love ya!!!!! searching the way to insert java script into CSS for several hours on the Internet , i finally found the alternative answer here. you saved my life!

  4. snuf (1 comments.) says:

    This one works on Mozilla and Opera too, and is just as simple:

  5. oso (1 comments.) says:

    What would really be useful to me is a different header image for each category. So I could have a category about my trip to cuba, let’s say, and have a header picture of Cuba up. Then it would change to a picture of Spain when someone clicks on the trip to spain category. I’ll go to the wp forums.

  6. Mike says:

    Re post 7:
    This is really the only one I found that works on my Mac. Thanks for the link!

  7. kirk says:

    I am looking for a way to have random header image, that corresponds to a certain css file pulled up at the same time. In other words… I have certain images that belong to certain css files… that both need to be pulled up at the same time… but the pair is to be choosen at random… Please if you have any direction or insight… mail me. thank you

  8. Cubaxp (1 comments.) says:

    For see Cuba.

  9. rivOvle (1 comments.) says:

    THX, this script works well!

  10. zeb (1 comments.) says:

    Hi, sorry but, I am stuck at point 1 above .
    I have blog at
    HOW can I ADD a folder (‘headers’) to the server ?
    Anyone using Blogsome Can give a hand ?
    Thank you so much

  11. Binu Thayamkery (1 comments.) says:

    Check this url : for ASP.Net implementation of rotator.


  12. khairulu (1 comments.) says:

    maybe this link can help


  13. duluoz (1 comments.) says:

    Exactly what i need! Thanx!

  14. Michael (19 comments.) says:

    Wonderful! I’ve been butting my stupid head against several metaphorical walls all afternoon trying various ways to get randomly selected pictures to show up on my blog header. Thanks to your clear explanation (and Matt’s script) it works perfectly now.
    ( I love being ignorant – there are so many nice surprises in life!)

  15. Dan (1 comments.) says:

    Thanks for the simple write up! I followed what you did and got it to work.


  1. […] 54);
    File Category: Asides — by danithew at 4:30 pm

    Here’s a post that can help me create a random header image rotator. […]

  2. […] tever passes by…

    Random Image Header

    Random Image Header

       In General Socky […]

  3. […] ge Rotater. And I modified the rin theme stylesheet according the the instructions here – Weblog Tools; Random Image Header. […]

Obviously Powered by WordPress. © 2003-2013

page counter