PHP: Random Background Image PHP: Random Background Image

PHP: Random Background Image

I’m working on a website for a local wrestling company and one thing that was requested is having alternating backgrounds featuring different wrestlers. There are many tutorials that show you how to do this (there are different ways to do this too) but I’m going to share what I use to get this done. I find the code to be very simple and straight-forward.

Step 1: Code above the DOCTYPE

You need to set up an array with the background filenames. These would be the images you want to randomize. This code is added it above the doctype declaration on your site.

Note: If you’re using HTML5, the following code would be written above the <!DOCTYPE html>

If you’re using HTML 4.01 (which contains three different declarations: Strict, Transitional and Frameset), the code would be written above the <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”> (I’m using the XHTML 1.0 Transitional doctype declaration for this example)

$background = array('bg01.jpg', 'bg02.jpg', 'bg03.jpg', 'bg04.jpg', 'bg05.jpg');
$index = rand(0, count($background) - 1); 
// This variable declaration generates a random number that's within the size of the array
$randomBackground = $background[$index]; 
// This sets the variable equal to a random filename chosen from the background array

Step 2: CSS in <head>

To display the random background on your page, you will have to add the following code inside the tag of your file. This will create a ‘class’ to be added to the tag later. Feel free to add any properties you may need for the background (background-repeat, background-attachment, etc.)

.randomBackground {
background: url(images/<?php echo $randomBackground; ?>);

Step 3: CSS Class in <body>

All that’s left to do is add the CSS class randomBackground to the tag of our file, something like this:

<body class="randomBackground">

And we’re done! You should be able to see random backgrounds every time you refresh the page. Click the button below to see a demo.

Step 4: See it in action!


  1. That’s very cool! I wouldn’t do it on my site as it would seem too distracting for a blog, but thanks for sharing the information! I’m sure lots of people will find it helpful. :)

  2. Ah! This is so helpful! I’ve been looking for something like this. I’m working on a clients website and I think they will flip over something like this. Thank you so much for this!

Leave a Reply

Your email address will not be published. Required fields are marked *