thought-afterGeeky stuff by Lafinboy

Oh hai!

thought-after.com 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.

Random background image script generator

The form below can be used to generate a block of Javascript that can be included on any page to provide dynamic, random background images to any page element with an id value.

If you are looking for a PHP server side solution read CSS Random Background Image Rotation.

Instructions:

  1. Enter the id value of the element you wish to apply the background to. For example, if you have a div element with an id value of wrapper, e.g, <div id="wrapper">, enter wrapper in the Element ID field.
  2. Enter either a relative path, or full URL to the image to be used for the background. For example, the logo for this site can be referenced as:
    • /wp-content/themes/k2/styles/thoughtafter/sign.jpg a path relative to the root of this site, or
    • http://www.somesite.com/images/imagename.jpg a full URL

    Enter the path/URL value in the URL of image field. Click the add another image link to enter more images.

  3. Click the Generate Script button, and the complete Javascript block will be displayed in the textarea.
  4. Copy the complete generated script block and paste into the <head> section of your web page, immediately before the closing </head> tag.

If you have comments or feedback about this tool please leave them at this post.

Random Background Image Script Generator
  • The id value of the element to which the background is to be applied
    • Enter a full url to the image to be displayed as the background add another image
  • OR
  • Once generated, copy the code below and paste it into the <head> section of your document, immediately before the </head> tag.

Browse by Topic

Email Me