thought-afterGeeky stuff by Lafinboy

Oh hai! is published by Lafinboy, aka Scott Swabey, a self confessed geek, standards compliant web developer, OOP afflicted code monkey, loving father and husband. These are (some of) his thoughts.

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!

This entry was posted by Lafinboy in CSS, Free Tools and tagged , , . Bookmark the permalink.

34 Responses to Free random background image script tool

  1. JenaLyn says:

    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. jw says:

    Works, but it messed up the css for my div tag! Any help to get my css AND the script to work?

  3. Harry61 says:

    Hello Scott,
    many thanks for the great random script!
    Continued success!

  4. Lafinboy says:

    Hi and apologies to all who have commented on the script being missing. It's back now, and ready for you to use as you see fit.

  5. aliciajoohee says:

    i can't see the form or the script code T_T

  6. Andre says:

    There isn't an form to fill in, is the script down?

  7. Lafinboy says:

    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.

  8. ldun says:

    Great script, but I'm trying to have the images display at width:100%. How should I append the script?

  9. Tom says:

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

  10. Kate says:

    This script is awesome. Thank you so much!

  11. cal says:

    it takes 1 minute to implement.
    Great script and works great.

  12. George says:

    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?

  13. Thanks for the awesome script, and the even more awesome script generator!

    Very Very useful!


  14. Dave Reynolds says:

    Hi, I'm currently trying to build a site, and wanted some random pictures. Have inserted the script, but nothing happens. Try: The second frame should have background. TVM David.

    • Lafinboy says:

      Hi Dave, the problem is with your image paths in the script. They either need to be fully resolved, eg, or relative paths, eg /wpcweb/images/wpc011.jpg.

      The paths as you have them at the moment are neither, and as such the images cannot be found.

      • Dave Reynolds says:

        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.

  15. eddiedm says:

    It won't show up in safari 4.0.2 or my firefox for me. Not sure why

  16. Dave says:

    thanks! i will for sure

  17. Dave says:

    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?

  18. Hugh says:

    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.


  19. Hugh says:

    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?


  20. Levi says:

    I don't actually see the generator, just the page for it. Is it down?

  21. Wwwindi says:

    Will this work on the iPhone?

  22. Sean says:

    Thanks for the script. Works like a charm in IE7, Safari 4 Beta and Firefox 3.

  23. Almog says:

    Hi!the script works fine on Internet Explorer but in Firefox its not working why?

  24. Sadmir says:

    Hi, I love the script generator, its easy and clean ,

  25. 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?


  26. ryan says:

    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 *

Browse by Topic

Email Me