by Nicole J. Tirado on December 5, 2013 | Filed Under: , | 8 comments

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (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!

DEMO

Related Posts:
Code, Code, Code
Time to Reboot
Thesis: Image Upload and Storage
Wordpress: Visual Editor Stylesheet Modification
Wordpress: Custom Signature on Posts

Share This

Pinterest

    8 Comments

  1. Manda says:   UglyGeekGirl

    Great tutorial! Thanks!
    Manda recently posted..Holiday Card Exchange 2013

  2. Dasiy says:

    You made this so easy! Thanks!

  3. 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. :)
    Kisa Johnson recently posted..Bright Light Pillow – Review

  4. Jamie says:   Rawkinwwgirl

    Great tutorial! Thank you!
    Jamie recently posted..Finders Keepers

  5. 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!

  6. Sara says:

    I’ll definitely give this script a go. I am so behind everything websites these days, but that effect is really good!

  7. Cassie says:

    This is really a great post. Cool and very detailed. Thank you for sharing this very informative post
    Cassie recently posted..Poeme

Post your comments

Current day month ye@r *

CommentLuv badge