You're browsing the tag: Tutorial


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)

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.)

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:

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!



Javascript: Random Image Generator

I wrote a tutorial on generating random links with javascript some months ago. Recently, a person requested to show how to show this method but with images. This is why I’m writing this tutorial about how to create a random image generator.

The first thing you need to do is create an array with the URLs of the images you’re going to use. There are two common ways to do this, as you saw on the random link tutorial.

The condensed array:

Or the regular array:

You can use any of these two methods. The next step is to create the function that will generate the images using a native random method.

And that’s it! All that’s left for you to do is to combine all the code (showed below), which would display the image and every time you refresh the page, a random image from your array will appear.


Here’s the complete code:


If you have any questions, don’t hesitate to leave a comment.


Follow @_NicoleJeanette