How to Rotate Your Web Page Background at Radom

How to Rotate Your Web Page Background at Random

Problem: I want my web page background image to change every time the page is loaded by picking an image at random.

The images in this solution are all prepared in advance. They are all named live#.jpg where "#" is a number between 1 and whatever the number of images you have. Hence they are named:

live1.jpg
live2.jpg
live3.jpg
........

The naming system simplifies the script that will be used to load the images.

The approach adopted is a three-step algorithm:

Create an array of the file names for these image files in a certain folder. In my case, the folder is called "slides".
Count the number of files. There are possibilities of counting sub-directories and . and .. if not careful. In this solution, we ensure no subdirectories are in the target folder and do a little arithmetic to eliminate the .. and .. folders.
Generate a random number based on the number of files in the target folder and append this number to the base name of the image files then use this name in the CSS background property.

PHP Script Example

$path = "slides/"; //the relative oo absolute path to the image files
$files = scandir($path); //get list of files in the target folder
$size = count($files); //count the number of files (including . and ..)
$number=rand(1,$size); //generate a random number between 1 and $size

Generate Image File Name

echo("background-image: url(slides/live");
echo($number);
echo(".jpg);");

This could be shortened to:

echo("background-image: url(slides/live".$number.".jpg);");

Background Tricks

"background-size: cover;" forces the image to cover the entire element. See demo .

Some older browsers may not implement it properly. See this discussion.

The final page looks like this (minus other CSS and HTML code):

---------------------------------------------------------
<!DOCTYPE html><html><head><title>Background Image Rotator</title><style type="text/css">
html { <?php $path = "slides/"; $files = scandir($path); $size = count($files); $number=rand(1,$size); /* echo("background-image: url(slides/live"); echo($number); echo(".jpg);"); */ echo("background-image: url(slides/live".$number.".jpg);");
?>
-webkit-background-size: cover; /* for older browsers using webkit engine */ -moz-background-size: cover; /* for older Mozilla Firefox */ -o-background-size: cover; /* for older Opera browser */ background-size: cover; /* for all modern browsers */ /* add your CSS ... */
</style>
</head>
<body>


</body>
</html>
---------------------------------------------------------

To save time processing files, there are ways to rename files. The easiest is to highlight all files in a folder with Ctrl + A then type the base name and press ENTER. Windows will rename the files using the base name (such "Word Doc 2016_31_10") and a number as follows:

Original List

Output

See this site for a more detailed description.

You can remove the parentheses using the following two Powershell commands:

dir | rename-item -NewName {$_.name -replace "\(",""}

dir | rename-item -NewName {$_.name -replace "\)",""}

To launch Powershell, browse to the target directory then open the File menu as follows:

As you fire away at your keyboard, remember the Messiah is coming and prepare. I guarantee it.

Be blessed today.

Computing Trivia

Search This Blog