Skip to main content

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:
  1. Create an array of the file names for these image files in a certain folder. In my case, the folder is called "slides".
  2. 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.
  3. 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>
<!-- add your web page content here ... -->

</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
wrn_3

Output
wrn_4

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.


Labels:

Comments

Post a Comment

Popular posts from this blog

How to Install Packet Tracer 6.0.1 for Linux

This article is intended to help me remember the installation process for Cisco Packet Tracer 6 details of which seems to be hard to come by on the web. 1. Log in in to your Cisco Netspace account. Yes, you need to be logged in. 2. The " Download PT 6.0.1 " link on is on the NetSpace home page. 3. Click this " Cisco Packet Tracer " link shown below the folder icon as shown in the figure below: 4. Select  Cisco Packet Tracer 6.0.1 5. Select download location. 6. After completion of download, use your file manager to open that folder and rename the file to something such as "CPT6". It is a shell script so no file extension is required. 7. Change the file permissions to executable using command: sudo chmod 777 CPT6 from a terminal window opened in the download directory. This assumes your downloaded file is renamed CPT6 8. Launch the file with command: ./CPT6 from the terminal window. You will get the message: Self extracting archive... We...
1 comment
Read more

How to Install Visual Basic 2017 Offline

This page offers a way to avoid the long and error-prone online installation of Visual Studio which is a massive package. Our interest is limited to Visual Basic and ASP.Net. One can, later, add other tools such as C# and C++. In this page, "VS" refers to Visual Studio. Installing Visual Basic 2017 Offline is not a simple process because Visual Basic 2017 is a part of Visual Studio 2017 that comes as one huge package (up to 35GB) in three versions: Community Edition (Free) Professional Edition (intended for a few people) Enterprise (intended for larger software teams)  Visual Studio by default uses a web-based install process that starts by downloading one of three the bootstrapper package from the VS download page . When you run the bootstraper, it will initiate download of the Visual Studio components that may be up to 35GB in size and takes a very long time to complete. The purpose of this page is to explain how to avoid the headache of this long and tedious ...
Post a Comment
Read more

Android Applications with Intellij IDEA - 1

This article applies to Android applications in Windows using IntelliJ IDEA development tools. Windows 7 was used in this example but the explanation will work for other recent versions of Windows. It is quite a task learning how to use mobile application development tools. This page describes how to digitally sign your .apk file which is the  Android application package file. In short, your Android program file. Once you have created an APK file to launch it, simply copy to your device and use the Android file manager to install it. The picture below shows the digital signature keystore file, the unsigned APK file and the signed APK file. The procedure of signing the APK file is quite straighforward but first you must ensure your Java JDK is properly installed and that the Java tools are accessible on your commandline (Windows command console - what used to be called the DOS window). Most important is that your PATH environmental variable (In Windows 7 find thi...
Post a Comment
Read more