Assuming that you deside instead to display the seasons as they are where you live or have a server side script that looks up the IP address to determine where your visitor is located then determining which of four images to use as the background can be easily determined.
All that you need to do to install this effect onto your web page(s) is to copy the below code and save it either as a separate file (perhaps named season.js) or paste it between script tags in your web page itself. You then set up four images to reflect whatever you want for the four seasons and save them as summer.gif, winter,gif, spring.gif, and autumn.gif (or if you want to use different names then update the filenames in the backImg array. Set north to true to display northern hemisphere seasons or false to display southern hemisphere seasons.
var backImg = ['summer.gif','autumn.gif','winter.gif',
var today = new Date();
var month = today.getMonth();
if (today.getDate() > 20) month++;
backgroundImage = 'url('+backImg[Math.floor((month
The only peculiar thing about this particular script is where you need to put it. This script must NOT go in the head of your page. To place it there and try to run it straight away will mean that the body tag is not yet defined and is therefore unable to be updated to attach the appropriate background image. Placing the code in a function and calling it from the onload event handler wont achieve the desired result either as this would mean that the rest of the page would be fully loaded before the background image is attached. The only place where this script can be placed in your web page where it will achieve the desired result is immediately after the body tag itself. So (assuming that you put it in an external file called season.js) the code to call the script will look like this:
Actually I have cheated slightly with the code in this script. The script assumes that the seasons always start on the 21st of the month where in fact only three of the seasons actually do with the fourth starting on the 22nd of the month. This means that the script will display the wrong seasons image on the 21st September each year but since the extra code to cater for this would make the script one third longer I figured that this is close enough for most people. If you want to correct this then you need to modify the test for day greater than 20 to take the month into account.
The script works by first retrieving the current month number (0 = January, 11 = December) and then adds 1 to it if the day of the month is after the 20th.The main piece of code that does the work of deciding which image to display is month+(north?6:0))/3)%4. For the northern hemisphere 6 months is added to the month to bring the month field into line with southern hemisphere dates. So now we have a number between 0 and 18. Dividing this by three gives us a number between 0 and 6 and taking the modulo 4 of this wraps 4 onto 0, 5 onto 1, and 6 onto 2. The resultant number between 0 and 3 represents Summer, Autumn (fall), Winter, and Spring respectively and so we grab the appropriate image from the array and put it into the background of the page.