Background Image Seasonal Rotation

A HunBug Document
Document No.: 11500
Last Updated: 01 Apr 2008
Author: HunBug

This function allows you to change background images on a seasonal basis. The same image will be selected for a defined period within the year, then a different image for the next season.

The Function

The function uses the month to determine which season to select.

<html>

  <head>

    <script>

      function seasonalBackground(node,images)
      {

        switch(new Date().getMonth())
        {
          case 2: case 3: case 4:
            img = 1;
            break;
          case 5: case 6: case 7:
            img = 2;
            break;
          case 8: case 9: case 10:
            img = 3;
            break;
          default:
            img = 0;
        }

        node.style.backgroundImage = "url(\""+images[img]+"\")";
             
      }

    </script>
  </head>
 
  <body>
 
    <h1>Seasonal Background Image</h1>
    
    <script>
    
      var imgArray = new Array();
      imgArray[0] = "images/winter.jpg";
      imgArray[1] = "images/spring.jpg";
      imgArray[2] = "images/summer.jpg";
      imgArray[3] = "images/autumn.jpg";

      seasonalBackground(document.body,imgArray);

    </script>
 
  </body>
 
</html>

The image paths need to be entered into an array, imgArray, this is then used by the function to select the background image. You can add as many images as you wish, just increment the number in the square brackets.

Don't forgot the month values start at 0 for January

The seasonalBackground function accepts two parameters:

  • node: This is the element to apply the backgroundImage to. In this example the document body is  used.
  • images: This is a reference to the array which contains the images

Variations

The example over sets the background image of the document body, however any element that can have the style property set can be used.

dailyBackground(document.getElementById('myDiv'),imgArray);

You don't need to keep with the four seasons, add additional code to the switch statement to create a more complex.
To add Halloween the page can be modified as so.

<html>

  <head>

    <script>

      function seasonalBackground(node,images)
      {

        switch(new Date().getMonth())
        {
          case 2: case 3: case 4:
            img = 1;
            break;
          case 5: case 6: case 7:
            img = 2;
            break;
          case 8: case 10:
            img = 3;
            break;
          case 9:
            if((new Date().getDate())==31)
              img = 4;
            else
              img = 3;
          default:
            img = 0;
        }

        node.style.backgroundImage = "url(\""+images[img]+"\")";
             
      }

    </script>
  </head>
 
  <body>
 
    <h1>Seasonal Background Image</h1>
    
    <script>
    
      var imgArray = new Array();
      imgArray[0] = "images/winter.jpg";
      imgArray[1] = "images/spring.jpg";
      imgArray[2] = "images/summer.jpg";
      imgArray[3] = "images/autumn.jpg";
      imgArray[4] = "images/halloween.jpg";

      seasonalBackground(document.body,imgArray);

    </script>
 
  </body>
 
</html>

Style

There are several style sheet properties to control the appearence of the background image:
  • background-attachment: scroll , fixed, inherit
    • This defines whether the background should scroll with the element or be fixed if the element scrolls.
  • background-image: <url>, none, inherit
    • The is used by the function to set the background image.
  • background-position: [ <percentage>, <length>, left, center, right ], [ <percentage>, <length>, top, center, bottom ]
    • This property takes two parameters to position the initial image. Tiled image positions will be calculated from this image if repeating has been set.
  • background-repeat: repeat, repeat-x, repeat-y, no-repeat, inherit
    • This defines the tiling pattern for the image.

Further Reading

Daily Background: A variation on this function, that changes the background image on daily basis.
Fade Slideshow: More image controls, this time displaying an array of images as a slide show.

HunBug Store








Comments are all individually read, none are automatically posted to the site.