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!
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!
Works, but it messed up the css for my div tag! Any help to get my css AND the script to work?
Provide a working link to a page, describe in full what ‘messed up’ means, and I’ll see what I can do 🙂
Hello Scott,
many thanks for the great random script!
Continued success!
Harry
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.
i can’t see the form or the script code T_T
where is tool???
There isn’t an form to fill in, is the script down?
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.
Great script, but I’m trying to have the images display at width:100%. How should I append the script?
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).
This script is awesome. Thank you so much!
it takes 1 minute to implement.
Great script and works great.
thanks.
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?
Thanks for the awesome script, and the even more awesome script generator!
Very Very useful!
Cheers!
Hi, I’m currently trying to build a site, and wanted some random pictures. Have inserted the script, but nothing happens. Try: http://www.wycombephil.org.uk/wpcweb/index.html The second frame should have background. TVM David.
Hi Dave, the problem is with your image paths in the script. They either need to be fully resolved, eg http://www.wycombephil.org.uk/wpcweb/images/wpc011.jpg, 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.
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.
It won’t show up in safari 4.0.2 or my firefox for me. Not sure why
thanks! i will for sure
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?
Hi Dave, this script is developed to specifically display a single random image on page load.
I would suggest you look into using the jQuery Javascript framework on your site along with one of the many image gallery/slideshow plug ins that are available for it.
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.
Hugh
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:
#topheader
{ background: url(images/371.jpg) repeat-x;
width: 100%;
height:300px;
float:left;
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?
thanks
Hugh
I don’t actually see the generator, just the page for it. Is it down?
Hi Levi – the generator script should be back up now. Thanks for letting me know there was a problem.
Will this work on the iPhone?
It will work when viewed in Safari on the iPhone, yes.
Thanks for the script. Works like a charm in IE7, Safari 4 Beta and Firefox 3.
Hi!the script works fine on Internet Explorer but in Firefox its not working why?
Tnx!
Hi, I love the script generator, its easy and clean ,
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?
-Jez
the images flicker badly: http://www.hostv.com/company.shtml
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!
-rgf