Change a DIV's Background via CSS based on time

Hey,

I've got this piece of CSS;

#header {
background: url(images/header.png);
height: 150px;
width: 900px;
}

How do I set it so that between 9PM and 6AM the background for it is images/header1.png (showing moon etc) and otherwise it displays header.png (sunshine etc)

+rep to all help

Quote:

---

Originally Posted by Favourtism

Hey,

I've got this piece of CSS;

#header {
background: url(images/header.png);
height: 150px;
width: 900px;
}

How do I set it so that between 9PM and 6AM the background for it is images/header1.png (showing moon etc) and otherwise it displays header.png (sunshine etc)

+rep to all help

---

Youd probably need to use php, ether to generate that bit of css, or as part of the image itself*

*basically you create a php file that contains the code to include the image you want depending on the time of day. Use a htaccess to make the php interpreter check say, pngs for php, then change the extension of your image file php to png itself "/

Though easiest method would probably be just to cut the image out of your css and apply it as an inline style using some php inside your page. "/

Right, how do I do that LOL. The only PHP I can do is advertisment/banner random generators etc :'(

This is my 26th hour awake coming from 2 hours sleep last night so appologise if the code makes no sence

change your (im guessing div) tag id'd as header to add the style=' stuff ' and php bit below. + remove the background image from the css up top

Code:

---

<div id='header' style='background-image: url(<?php

$time = date('G'); //return current hour (server time)

if($time < 7 || $time > 21) echo 'images/header.png'; // 9;00pm -> 6:00am
else echo 'images/header1.png'; //7am ->8pm

?>);'>

---

No garentees thats correct / will work, twas off me head and me head has kinda stopped working :)

This is my 26th hour awake coming from 2 hours sleep last night so appologise if the code makes no sence

change your (im guessing div) tag id'd as header to add the style=' stuff ' and php bit below. + remove the background image from the css up top

Code:

---

<div id='header' style='background-image: url(<?php

$time = date('G'); //return current hour (server time)

if($time < 7 || $time > 21) echo 'images/header.png'; // 9;00pm -> 6:00am
else echo 'images/header1.png'; //7am ->8pm

?>);'>

---

No garentees thats correct / will work, twas off me head and me head has kinda stopped working :)

Hey,

Just remembered that vBulletin Templates do not parse php LOL. Lemme add it as a product and try. THANKYOU

Screw that, I'll make it a .php file and then use that as the divs background.

How do I edit that PHP so that instead of generating the url or header.png, it actually shows it?

While browsing around searching for a css style switcher, I came along this thing.
Let me Google and find it again :)

EDIT: Check this..
http://www.katgal.com/2007/03/time-s...er-change.html

Quote:

---

Originally Posted by Meti

While browsing around searching for a css style switcher, I came along this thing.
Let me Google and find it again :)

EDIT: Check this..
http://www.katgal.com/2007/03/time-s...er-change.html

---

Dont really wanna change the whole css though

You only change the background image...?
Copy the default.css, and rename it to like "night.css". Then only change the background. And edit the codes given by the KatGal site.

Here's the best solution:
dont do it.

It sounds very unnecessary.

Hey, additional solution since im more awake now. Just use the php with the css file. Simply make your css file a .php, add my code to it, but inline with your other css and it should work.

Additionall at the top of the doucment you may wana set header to make sure browser recognises it as css file

aka at top of css page have

<?php header('Content-type: text/css'); ?>

Quote:

---

Originally Posted by Brixsta

Here's the best solution:
dont do it.

It sounds very unnecessary.

---

1) It's needed
2) It's your crap post that's very unnecessary.

Quote:

---

Originally Posted by Mentor

Hey, additional solution since im more awake now. Just use the php with the css file. Simply make your css file a .php, add my code to it, but inline with your other css and it should work.

Additionall at the top of the doucment you may wana set header to make sure browser recognises it as css file

aka at top of css page have

<?php header('Content-type: text/css'); ?>

---

Thanks, ill try it now

<script>

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>