Random Image Header
Thanks for visiting! If you're new here, you may want to subscribe to our RSS feed. This blog posts regular Wordpress news, updates of themes, plugins, ideas, hacks, quick fixes and everything about blogging, especially about Wordpress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.
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. ![]()


(8 votes, average: 4.38 out of 5)










Comments RSS
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.
[...] tever passes by…
Random Image Header
04/17/2004
Random Image Header
In General Socky [...]
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..
[...] 54);
File Category: Asides — by danithew at 4:30 pm
Here’s a post that can help me create a random header image rotator. [...]
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?
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!
This one works on Mozilla and Opera too, and is just as simple:
http://www.alistapart.com/articles/randomizer/
Re post 7:
This is really the only one I found that works on my Mac. Thanks for the link!
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. berrym15@msu.edu thank you
[...] ge Rotater. And I modified the rin theme stylesheet according the the instructions here - Weblog Tools; Random Image Header. [...]
For see Cuba.
THX, this script works well!
Hi, sorry but, I am stuck at point 1 above .
I have blog at http://yellowfields.blogsome.com/
HOW can I ADD a folder (’headers’) to the server ?
Anyone using Blogsome Can give a hand ?
Thank you so much
Zeb
Check this url : http://www.directkerala.com/do.....s-and.html for ASP.Net implementation of rotator.
Cheers
maybe this link can help
http://blogsome-forum.blogsome.....=8722#8722
Exactly what i need! Thanx!