Aol.com home page has changing the background image on every refresh, quite interesting. So how to apply this kind of effect to your web project, take a quick look this post. It’s simple just five lines of javascript code. Use it and enrich your web project user interface.
Download Script 
Live Demo-1 Live Demo-2The tutorial contains a folder called bgimages with background images files.
index.html
bgimages
-- 1.jpg
-- 2.jpg
-- 3.jpg
-- ....
-- ....
bgimages
-- 1.jpg
-- 2.jpg
-- 3.jpg
-- ....
-- ....
Javascript
Here variable totalCount is number of backgrounds. The Math.random() method returns a random number between 0 and 1 and the Math.ceil() method rounds a number towards to the nearest integer, and returns the result.
<html>
<head>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>
</head>
<body>
// Page Design
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
<head>
<script type="text/javascript">
var totalCount = 8;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>
</head>
<body>
// Page Design
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
Short And Sweet Nice ..... :)
ReplyDeleteAwesome again friend. Thank you, you are a great help in my web design career.
ReplyDeletethNx :)
ReplyDeleteis simplest way with php?
ReplyDelete<body style="background-image:url('../path/to/image/<?php echo rand(1, 8); ?>.jpg');">
nice with php
ReplyDeleteyep really nice, tnx guys
ReplyDeleteIt's Good..... Keep It Up..........
ReplyDeleteis simplest way with php and jquery:
ReplyDelete$(document).ready( function(){
$(body).css({background-image,".jpg"});
});
very cool & good js tips for beginners, thank you very much for sharing.
ReplyDeleteIt's not good practice to use this, always it will require to download a new image in every page, but yeah it depends where you use it!
ReplyDeleteHi guys I am a beginner and received an email from Oracle regarding JavaOne & Oracle Develop conference 2011 to be held in Hyderabad..
ReplyDeleteI am hoping attend Oracle Develop conference this year. Expecting several sessions about application Grid and Oracle WebLogic Track and many more is much needed.
Here’s a link I received: http://bit.ly/e1B2Ez
What do you guys suggest????
Short And Sweet Nice
ReplyDeletesweet!!!!!
ReplyDeletehow can i make it one by one like 1 then 2 3...
ReplyDeletereally it`s amazing blog post.
ReplyDeleteHow can I use "HTTP://" instead Document Patch?
ReplyDeleteHow can i use "HTTP" images instead pc images ?
ReplyDeletedocument.body.style.backgroundRepeat = "repeat";
ReplyDeletebut please help me background image how to center
realy helpfull code thanks guys.....
ReplyDeleteYa it's good. But it occur on Click. How it will be automatically change bg image.
ReplyDeletewould be great if it's resizable fullscreen background image. any idea on how to fix that?
ReplyDeleteAwesome, thanks!! :D
ReplyDeleteHow do I do this but for a div; not for the body ?
ReplyDelete@9lessons and if i'll want to do this same thing with colors, so how can i do it ?????
ReplyDeletethx really it's very useful & simple. But i hope if someone help me to display imges in an ascending order ?
ReplyDeletehi, how to add autofir property? (cover property)
ReplyDeleteHi, how do I make the images stretch automatically to fit the screen size?
ReplyDeleteUsable bro. thank you.
ReplyDelete