Log in

View Full Version : Rotating background (sky) based on the time of day


hyebaragi
07-25-2007, 08:38 PM
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
Sliight
07-25-2007, 09:02 PM
Sounds like a cool idea... this script came from: http://www.jsmadeeasy.com/javascripts/Background%20Effects/Different%20background%20depending%20on%20time/index.htm

"Change your background depending on time of day"

(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



<script>
<!--
//Feel free to copy and modify this script, but please keep the comment lines!
//Written by Mattias Sj&#246;berg 8/8-1996
//-----------------------------------------
//| mattias.sjoberg@swipnet.se |
//|---------------------------------------|
//| //\\ //\\ /// | |
//| // \\// \\ / | Advertise |
//|// \\ /// | |
//| Mattias / | Here |
//| Sjoberg /// | |
//|---------------------------------------|
//| www.geocities.com/SiliconValley/7116 |
//| Vote for my page the above URL |
//-----------------------------------------


var now = new Date();
var hours = now.getHours();
var psj=0;

//18-19 night
if (hours > 17 && hours < 20){
document.write('<body bgcolor="orange" text="#FFFFFF">')
}

//20-21 night
if (hours > 19 && hours < 22){
document.write('<body bgcolor="orangered" text="#FFFFFF">')
}

//22-4 night
if (hours > 21 || hours < 5){
document.write('<body bgcolor="black" text="#FFFFFF">')
}

//9-17 day
if (hours > 8 && hours < 18){
document.write('<body bgcolor="deepskyblue" text="#FFFFFF">')
}

//7-8 day
if (hours > 6 && hours < 9){
document.write('<body bgcolor="skyblue" text="#FFFFFF">')
}

//5-6 day
if (hours > 4 && hours < 7){
document.write('<body bgcolor="steelblue" text="#FFFFFF">')
}


//-->
</script>
hyebaragi
07-25-2007, 09:06 PM
wow thanks for the reply! this is perfect!!!! how should i change this, though? from colors to images? <img src = "http://"> instead of BG? can you help me with that part too?
Sliight
07-25-2007, 09:16 PM
When you choose to use a background image for the page it is always a good idea to specify a background color as well.

<body background="drkrainbow.gif" bgcolor="#333333" text="FFFFFF">

I think that should work... can try it
Sliight
07-25-2007, 09:18 PM
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.
hyebaragi
07-25-2007, 09:22 PM
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
Sliight
07-25-2007, 09:37 PM
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.

#body {
background-image: url(images/yourbackground.gif);
background-color: #ffffff;
width: 100%;
height: 100%;
position: fixed;}

Or the way to avoid getting your image all messed up would be to use the exact dimensions of your background instead of 100% for width and height ie.

width: 500px;
height: 800px;

You can remove the position: fixed; if you want it to scroll away... if you do this, be sure there is a background color as well, or it will scroll away to a white background
Sliight
07-25-2007, 09:38 PM
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.
LadyA
07-30-2007, 05:44 PM
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?

Thanks in advance for any help.

LadyA.
SammyGeerts
02-09-2013, 11:39 PM
<script>

var now = new Date();
var hours = now.getHours();
var psj=0;

//18-19 nacht
if (hours > 17 && hours < 20){
document.body.style.background="#000000 url('http://www.sammy-geerts.be/img/b2-2048.jpg') no-repeat center center fixed";
}

//20-21 nacht
if (hours > 19 && hours < 22){
document.body.style.background="#000000 url('http://www.sammy-geerts.be/img/b2-2048.jpg') no-repeat center center fixed";
}

//22-4 nacht
if (hours > 21 || hours < 5){
document.body.style.background="#000000 url('http://www.sammy-geerts.be/img/b2-2048.jpg') no-repeat center center fixed";
}

//9-17 dag
if (hours > 8 && hours < 18){
document.body.style.background="#ffffff url('http://www.sammy-geerts.be/img/b-2048.jpg') no-repeat center center fixed";
}

//7-8 dag
if (hours > 6 && hours < 9){
document.body.style.background="#ffffff url('http://www.sammy-geerts.be/img/b-2048.jpg') no-repeat center center fixed";
}

//5-6 dag
if (hours > 4 && hours < 7){
document.body.style.background="#ffffff url('http://www.sammy-geerts.be/img/b-2048.jpg') no-repeat center center fixed";
}

</script>