Change background image while page refresh using Javascript | 2my4edge

28 June 2013

Change background image while page refresh using Javascript

Are you getting bore of the same background image on your web page, no worries. For each refresh/reload of your web page, change new and new background images using javascript. It is very simple concept by using javascript. This page background change is make is your web page more impressive and not getting bore. So let see the coding for this.

DOWNLOAD             LIVE DEMO

Java script

<script type="text/javascript"> 
var bgcount = 8;
function changebg() {
var num =  Math.ceil( Math.random() * bgcount );
document.body.background = 'bgs/'+num+'.jpg';
document.body.style.backgroundRepeat = "norepeat";
}
</script>

The above script is for change the background image, you can understand the script, you just have call the function so for inside of the body tag just use the script

<script type="text/javascript"> 
changebg();
</script> 

changebg(); is call the function in the script, so the scripts runs the operation.
And here just share one more information for refresh the page using meta tag.

<meta HTTP-EQUIV="REFRESH" content="5">

http-equiv=”refresh” is for refresh the page, and the content=”5” is for each of the 5 second the page will be reloaded.

6 comments:

  1. thanks for arun.. very nice...

    ReplyDelete
  2. Can you also make it clickable

    ReplyDelete
  3. ok this is cool but how to you make the background image centered instead of fixed?

    ReplyDelete
  4. can we make a background change in sequence

    ReplyDelete
  5. can we change background image in sequence

    ReplyDelete

^