Friday, April 19, 2013

Change background on every refresh using PHP and CSS

Have you seen the old TWITTER on which after every refresh the site changes it's background image not only twitter the old AOL was doing the same and many other major and minor sites are doing it. By using this method you can also change the background image of your website. In this post i have implemented few lines of code which will help to change your sites background image on every refresh. Don't forget to check the live demo.

Before you start typing codes you'll need to get suitable background images, and change it's name to 1, 2, 3 and so on and also the extension of images should be same, and then need to gather it in a folder. For example:

I have made a folder which name is Backgrounds, and in that i added this images with same extension and numerically sorted.

Now, we are ready to use PHP to make the function work.

PHP: Few lines of PHP code can do many things!.

1. <?php
2. $bg = rand(1, 5);
3. $bgchange = $bg.".jpg";
4. ?>

We are using a rand() to get random numbers and assigned it to a variable $bg. Now we got random number and now we need to add extension to it. All my backgrounds images are in .JPG format (If any of your image is in other format you can download any image converter and convert it to a suitable format).

If you will print $bgchange variable you will find any number between 1 to 5 with .JPG for example : 1.JPG or 2.JPG etc..
Now we will use CSS to change our background image :

CSS: Changing Background of HTML document with CSS.

1. body {
2. background-image:url("backgrounds/<?php echo $bgchange; ?>");
3. background-repeat:no-repeat;
4. }

You can also do this using javascript. For doing it will javascript you can use Math.ceil() or math.floor() and you'll also need to use Math.random() function inside Math.ceil or Math.floor function,and then need to multiply with total numbers of images. For example :

Javascript : For doing the same thing did with PHP and CSS.

1.   <script type="text/javascript">
2. var totalimgs = 5;
3. function bg_change() {
4.   var count = Math.ceil(Math.random()*totalimgs);
5.   document.body.background = "backgrounds/"+count+".jpg";
6.   document.body.style.backgroundRepeat = "no-repeat";
7. }
8. </script>

The above Javascript should be added in head tags <head>...</head>.
And the function bg_change() should be called in body tags <body>...<body>.
HTML : Calling bg_change() function in body.