Background Image Change on Refresh with Javascript
Wall Script
Follow Me:
Thursday, March 10, 2011

Background Image Change on Refresh with Javascript

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.

Background Image Change on Refresh with Javascript

Download Script     Live Demo-1     Live Demo-2

The tutorial contains a folder called bgimages with background images files.
index.html
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>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


28 comments:

  1. Short And Sweet Nice ..... :)

    ReplyDelete
  2. Awesome again friend. Thank you, you are a great help in my web design career.

    ReplyDelete
  3. is simplest way with php?
    <body style="background-image:url('../path/to/image/<?php echo rand(1, 8); ?>.jpg');">

    ReplyDelete
  4. It's Good..... Keep It Up..........

    ReplyDelete
  5. is simplest way with php and jquery:
    $(document).ready( function(){

    $(body).css({background-image,".jpg"});
    });

    ReplyDelete
  6. very cool & good js tips for beginners, thank you very much for sharing.

    ReplyDelete
  7. It'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!

    ReplyDelete
  8. Hi guys I am a beginner and received an email from Oracle regarding JavaOne & Oracle Develop conference 2011 to be held in Hyderabad..

    I 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????

    ReplyDelete
  9. Short And Sweet Nice

    ReplyDelete
  10. how can i make it one by one like 1 then 2 3...

    ReplyDelete
  11. How can I use "HTTP://" instead Document Patch?

    ReplyDelete
  12. How can i use "HTTP" images instead pc images ?

    ReplyDelete
  13. document.body.style.backgroundRepeat = "repeat";
    but please help me background image how to center

    ReplyDelete
  14. realy helpfull code thanks guys.....

    ReplyDelete
  15. Ya it's good. But it occur on Click. How it will be automatically change bg image.

    ReplyDelete
  16. would be great if it's resizable fullscreen background image. any idea on how to fix that?

    ReplyDelete
  17. Awesome, thanks!! :D

    ReplyDelete
  18. How do I do this but for a div; not for the body ?

    ReplyDelete
  19. @9lessons and if i'll want to do this same thing with colors, so how can i do it ?????

    ReplyDelete
  20. thx really it's very useful & simple. But i hope if someone help me to display imges in an ascending order ?

    ReplyDelete
  21. hi, how to add autofir property? (cover property)

    ReplyDelete
  22. Hi, how do I make the images stretch automatically to fit the screen size?

    ReplyDelete

Make in India