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.