Title: Random element in CSS
Last modified: August 18, 2016
---
# Random element in CSS
* [Ozh](https://wordpress.org/support/users/ozh/)
* (@ozh)
* [21 years, 9 months ago](https://wordpress.org/support/topic/random-element-in-css/)
* Heya peeps
I wrote a small random.php that picks a random gif, no problem,
and my css is like : ` #div1 {background: url(random.php);} #div2 {background:
url(random.php);} #div3 {background: url(random.php);} My problem is : it seems
the random.php is parsed once, so all the divs have the same random image when
the page loads. Any clue to make it really random ?
Viewing 9 replies - 1 through 9 (of 9 total)
* [hanni](https://wordpress.org/support/users/hanni/)
* (@hanni)
* [21 years, 9 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83020)
* First thing that springs to mind is to have random1.php, random2.php and so on
each with the same content – and have
the background of div 1 as random1 and
so on. Some on after me will probablly point out a better, more technical solution
though!
* [Mark (podz)](https://wordpress.org/support/users/podz/)
* (@podz)
* [21 years, 9 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83021)
* This may help:
[http://www.alistapart.com/articles/betterrotator/](http://www.alistapart.com/articles/betterrotator/)
* [andrisig](https://wordpress.org/support/users/andrisig/)
* (@andrisig)
* [21 years, 9 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83022)
* Hmm .. I have never seen any one try this before. I could be wrong but I do not
think this is possible. One solution would be to create a CSS class for every
possible image and then do the random bit in the page itself but not the CSS
file.
* Thread Starter [Ozh](https://wordpress.org/support/users/ozh/)
* (@ozh)
* [21 years, 9 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83025)
* Hmm, actually I think it’s not even a .CSS but a php problem :
` 
* (@ozh)
* [21 years, 9 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83026)
* andrisig : yes, I think too. I think I’ll go to something I wanted to do for
a long time : use a server-side CSS file, ie wp-layout.php instead of .css, that
would be a lot easier 🙂
Thanks all anyway
* [nutria](https://wordpress.org/support/users/nutria/)
* (@nutria)
* [21 years, 5 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83443)
* I’ve found a similar PHP/CSS solution here:
[http://www.cb2web.com/tests/rotate.htm](http://www.cb2web.com/tests/rotate.htm)
It works with IE but not with Firefox. In Firefox I’ve to refresh to see the
backgroun change.. I hope this help sorry for my freaky eng luca
* [Constantinos Kouloumbris](https://wordpress.org/support/users/ckr/)
* (@ckr)
* [21 years, 1 month ago](https://wordpress.org/support/topic/random-element-in-css/#post-83466)
* Why don’t you do what I did.
* Create the images you want like a series. ie. header01.jpg, header02.jpg etc
and then add your css code into your header template.
`#header { background:
url()
/images/head0.jpg") no-repeat bottom center; }` And you are done. the php rand(1, 7);
function will create a random number between 1 and 7 inclusive. Problem solved
simple and easy.
* CK
* [syncbox](https://wordpress.org/support/users/syncbox/)
* (@syncbox)
* [19 years, 7 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83485)
* wow. I used this idea
to pull in a random image and
yes, it works (in this case, it is a foreground image, not background via css)
* I was hoping this would fix a problem I am having using rotate.php and pngbehavior.
htc to present a random foreground image (png32 format). IE doesn’t support png
transparency, but pngbehavior.htc fixes that. Only, when the image is randomly
selected using rotate.php, it fails to process the png to make the background
transparent. Bummer.
* So the above rand function works, but NOW, in IE, the whole image is transparent–
even the non-transparent bits! I can see that the image is there by looking in
the source code… and, of course, it is all working just fine in Firefox. Too
WEIRD.
* Any ideas, anyone? THis is obviously some issue with when things are processed–
the order in which the image is selected and then transparency applied… but I
cannot figure out a fix for the life of me. THere’s no flexibility in this –
I have to have png32 and it must be a random image.
* This is all just in the beginning stages, but if you want to see the missing
image, here’s a url:
* [http://dev.masilva.com/about-ma-silva/](http://dev.masilva.com/about-ma-silva/)
* view in Firefox, then IE6
* (nothing tested for mac or other browsers at this point, just rough layout, etc)
* Moderator [Samuel Wood (Otto)](https://wordpress.org/support/users/otto42/)
* (@otto42)
* WordPress.org Admin
* [19 years, 7 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83486)
* syncbox: Are you talking about the cork image in the bottom right that keeps
changing? If so, what’s wrong with it? It looks fine to me in both Firefox 1.5
and IE 6.
Viewing 9 replies - 1 through 9 (of 9 total)
The topic ‘Random element in CSS’ is closed to new replies.
* 9 replies
* 8 participants
* Last reply from: [Samuel Wood (Otto)](https://wordpress.org/support/users/otto42/)
* Last activity: [19 years, 7 months ago](https://wordpress.org/support/topic/random-element-in-css/#post-83486)
* Status: not resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics