CSS Backgrouns Rotation?

Tagged: CSS

This topic contains 6 replies, has 3 voices, and was last updated by Vera 1 year, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
July 12, 2011 at 11:44 pm #13912

Domenica
Participant

I was wondering is there is anyway I can have several images rotate as members change pages on my site or refresh through the CSS. I have seen quite a few PHP mini scripts for this but I kind of just want to stick to the CSS. Please no javascript suggestions. If I have to use a mini PHP script please suggest one that has no flaws or can harm a server (though none of you would suggest something like that. )

July 13, 2011 at 2:42 am #14711
Rose
Participant
You could give your body tag a different class on each page and do

body.about-me {

background:url(“”);

}

body.archives {

background:url(“”):

}

etc…

but if you want it to be random on each refresh, I think you’re outta luck!

Flawless PHP = easy, you’d have to be pretty dumb to write an insecure random css script.

Off the top of my head, I’d do something like:

<style type="text/css">

body {

background:url(“
```
<?php

switch(rand(0,1)) {

case 0:

print 'whatever.jpg';

break;



case 1:

print 'whatever-2.jpg';

break;

?>

");

}

?>
```
</style>

(Sorry if this doesn’t display properly, not sure how the forum deals with code
July 13, 2011 at 3:46 am #14712

Rose
Participant

small syntax error due to being in a hurry to go out and buy an icecream . Need a final closing bracket } before the ?> Sorry!

July 13, 2011 at 3:52 am #14713

Vera
Participant

http://codex.wordpress.org/Function_Reference/body_class – shows you how you can add a class to the body tag with PHP. – this is not random, and is set for a given page.

July 13, 2011 at 5:51 am #14714

Domenica
Participant

Thank you Vera and Rose very much! The wordpress ones may come in handy later but this is for my fanlisting collective (no cms system used) so for now I will use the code Rose came up with. thanks once again!

July 13, 2011 at 2:42 pm #14715
Domenica
Participant
I seem to have run into an issue, I was wondering what I did wrong.. I’ve been trying to fix it for a hour now. I inserted the following code in the style area of my header.php file and when i go to view my webpage nothing loads.
```
body {

background: url("

<?php

switch(rand(0,1,2,3,4)) {

case 0:

print 'harryp.jpg';

break;



case 1:

print 'ron.jpg';

break;



case 2:

print 'hermione.jpg';

break;



case 3:

print 'snape.jpg';

break;



case 4:

print 'bella.jpg';

break;

}

?>

") fixed no-repeat left top #000;

font: 90% tahoma;

color: #555555;

}
```
July 13, 2011 at 3:18 pm #14716

Vera
Participant

It should be rand(0,4), i.e. rand(minvalue, maxvalue).

See the function documentation: http://www.php.net/manual/en/function.rand.php
Author

Posts