Free random background image script tool

A while ago I posted a solution for generating CSS random background images, which provided a PHP server side solution for adding random background images to stylesheets on the fly.

Since it’s initial posting the solution provided there has been tweaked and fine tuned based on use and reader feedback. A lot of the feedback and comments were about the inability for readers to use that particular solution because they did not have access to modify the PHP source code. One such example is that of Bloggers, who have access to the Blogger templating system, but not the code.

In response to this feedback I have put together a free random background image script generator tool, which will generate a self contained block of Javascript which can be pasted into any template or web page, to provide random background image selection and application to a single element on that page.

Comments and feedback are encouraged, as are links from any sites that may find a use for the script!

34 comments on “Free random background image script tool

  1. I know it’s been years since you first posted this, but it’s basically taken me forever to find it on the web and I’m so glad I did! Thank you so much!

  2. Hi Idun – the width of the element you are applying the random backgrounds to should be controlled by your normal stylesheet. The script generator only applies a background image to the element.

    If you need some more guidance please provide a link to your site/page so I can see your code.

  3. Thanks for the awesome tool! FYI to idiots like me, don’t start your paths with a “/”! Worked in Safari 5, IE 8, Firefox 3.6 (windows/mac) and Chrome (windows).

  4. Awesome script.

    I’m an HTML n00b, so I don’t fully understand all this, but got it working. Just one hassle. Before I changed my background to be random, I had it as a scalable background, but since the change it doesn’t scale anymore. What 2 keystrokes am I missing?

      1. Hi again, Silly me! I’ve changed them now, but will have to wait for a sighted person to verify whether there is now a background. I’m blind, so any hints on tools which I may find useful would be a real bonus. TVM David.

  5. Worked great. I used it for the photography page to show random photos. I want to have the background images (the field and the space blur) to change randomly on each page. How do I set this code into the actual background page?

  6. Hold your horses…I’ve got it!!………didn’t notice the css selctors in the output script, fixed it there!

    Works a dream for me!! Many thanks, just what I needed.


  7. Hi, I couldn’t get the PHP solution to work either, but probably more through ineptitude…!

    However, this Javascript version seemed to work a treat and the images started rotating through as required.

    My problem is the images all had to be 1680px wide (!) as I can’t get the images to center in a centred (WordPress) design. These rotating images are meant to fill the ID #topheader – this already had a bunch of selectors as follows:

    { background: url(images/371.jpg) repeat-x;
    width: 100%;
    border-bottom: 1px solid #444; }

    I changed ‘repeat-x’ to ‘no-repeat top center’ – but 1024px or 1280px images are firmly stuck to the top left of the screen.

    So functionality, great! Styling, errm something wrong.

    any ideas how to remedy this?


  8. Hi there

    Loved your generator, only problem is I discovered that the code doesn’t work in safari or netscape 🙁

    Have I done something wrong?
    or is there a fix for that?


  9. Very useful tool! it allowed me to have randomly generated images on my website in a snap…(less than 5 minutes). Now I just need a better site!


Leave a Reply

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