If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Rotating background (sky) based on the time of day

Hi. I have a very lovely backgrund for my homepage... and I had this idea: to make the background colors change based on the time of the day. Currently, my background has a light orange, yellow sky with clouds. (Sun rise colors). I made different versions: Noon, sunset, evening, etc..

I thought it would be really cool to time the background to change: for example around 5- 6 am, have the current BG, but during the evening, have the background change to a deep red/orange sunset background. Does anyone know how to program this?

Basically, it would be rotating images, since I have separate images for each time of the day. Does anyone know how to program a backgronud to change the image at the accored time? Please, please help! I appreciate all of your responses

(I would think you could just use a background image instead of the color?) I may have to tweak that idea and put a small image in the top left that changes through the day... would be kinda cool to have the sun rising, fully up, set, and then the moon. Neat idea

You could also add: bgproperties="fixed"> to it if you want too... this will make the background image not scroll, which could be good if you want it to fill a page, not repeat, and not disappear. Personally it bugs me when the text appears to slide on the background, but if the image isn't too overpowering it might look better.

thanks is there anyway to make tha tinto just a regular image? instead of BG image? I have BAD experience with BG images. Whenever i use a BG code it turns my image all messed up. it doesnt fit the screen the way it should. as of now, im using "<img src ="http://"> as my first layer for the BG; just because I can nevr get the hang of BGS

p.s: i like ur sun idea too.. how would u get *that* one to work as well?

pps: i messaged u via email but its the same thing i posted here so u can ignore it . thanks so much

Well you could do it as a regular image, just not use the background tag, just use an image tag. The image would be placed in the body where the script is though, and really not work out the way you want. If you did this, you'd need to set the Z-index to a negative, so everything on the page appears in front of it.

Personally, I would use a CSS stylesheet to make a background image, and set the width and height to 100&#37;. This will keep it in the window regardless of size, but it will warp and look odd if someone views it in anything other than a square window. If your image can handle the warp without looking odd that could work...

This is getting out of my realm on how to do it within the HTML but you could try this...

Place this in the <head> section of your page

<link rel="stylesheet" type="text/css" href="main.css" />

___________________________________________________
Place this text inside of a notepad file, name is background.css and save it into your main web directory. Change the background color to match your background as best you can, or just leave out the color.

As far as just using the sun image, I'd place the script inside of a <div></div> and just use an image instead of background. It should just note the time of day, pick the image, and display it where the div is placed.

Similiar query

Hi guys,

I have a similiar query in that I want a rotating sky and image based on the time of day. However, I want a series of images for day, and a series of images for night. At the moment, I have the Javascript code above (from Mattias) to change the sky, which works fine. (The page background is white from 8am - 8pm, and black from 8pm - 8am.) I also have an array in javascript (just under the <HEAD> tag) to display a random picture (of 5 currently) when the user refreshes. Both work fine on their own, but how in the world do I combine the two scripts so that I get 5 night images cycling through between 8pm and 8am when the page background is black? And similiarly, 5 day images cycling through between 8am and 8pm when the background is white?