Rotating Banner Image

I got around to creating the rotating banner images last night. I made 3 new ones, but they aren’t really my best images. I need to hunt round for some others. My flowers don’t really fit the landscape type space that is there, but I will have to see what I can do.

To make this work, I started out with some javascript in an onLoad function, but the image would blink with either the default image, or the background color. To fix this, I scrapped that idea, and went to an inline style block that is written out with a little php in the header.php file in the template folder.

<style type="text/css">
  #headerLeft {
    background-image: url(<?php bloginfo('stylesheet_directory'); ?>
        /images/header-img-<?php echo rand(1,4); ?>.jpg);
  }
</style>

This just gets a number between 1 and 4, and the base directory for the template, and sticks it all together to make the image. Presto. No more flickering.