How do I make a full screen background change on refresh?
Question
I want to make the background image of this web page alternate pictures on refresh.
How could I accomplish this?
Offliberty does this. I've looked at the source code but can't quite figure it out. I found out that it's done with server side scripting and my host does support that, and that a script called sizzle is powering the Offliberty website but I'm just so confused when I look at the code.
4 answers
solution1
8 2011-04-21 17:47:11
You could easily do this on the client side as well if you want. Create multiple classes in your css:
backgr0 { background-image: url('images/somepic.jpg'); }
backgr1 { background-image: url('images/somepic.jpg'); }
backgr2 { background-image: url('images/somepic.jpg'); }
backgr3 { background-image: url('images/somepic.jpg'); }
backgr4 { background-image: url('images/somepic.jpg'); }
Then in your jQuery ready function:
$(function(){
var backnum = Math.floor(Math.random()*5);
$('body').addClass("backgr" + backnum);
});
Replace body with an #id of a div if needed.
solution2
1 2011-04-22 06:34:29
It would be best to do this on the server side, it seems to me you're using PHP, so I give you an example in that language. The background-image changes only on reload, so logically the difference should be in the HTML the client receives from the server.
You should use the same CSS classes that @DarthJDG has provided for you. The only difference is that you will attach the classes on the server, and not on the client side.
$number_of_classes=7; //the number of background images you have
$which_one=rand(0, $number_of_classes-1); //let's choose a class
printf('<body class="backgr%s">', $which_one); //put this wherever you are printing body
solution3
0 2011-04-21 17:58:03
When you're trying to find out if something is done with JavaScript or server-side code, the first thing you can do is turn off JavaScript entirely, reload the page a few times, and see what happens.
Unfortunately, Offliberty has everything invisible by default, so it just looks like a blank screen when there's no JS. However, the content is all still there , so it'll still work.
Those big background images are being applied to the #wrapper div, and when I refreshed - even with JS turned off - that background image was changing.
So it looks like they're using server-side stuff to do it.
(Also, for what it's worth, Sizzle is a JavaScript library that makes selecting elements much easier. It doesn't change anything for the user, it just makes development a little simpler.)
solution4
-1 2011-04-21 17:53:34
<div id=wrapper class=wrapper4> there are 20 or so background options found in the css. If you dont want to use php asp or severside code. you can write a javascript for this
document.write ( '<div id=wrapper class=wrapper' + Math.floor(Math.random()*21) + '>');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.