Change background depending on time of day

PHP and CSS script to change the background based on time

A Classic Implementation of PHP & CSS

Hello World.

Check out the skyline in the header of this blog, for those that don’t recognise it, it is Berlin. But what is more noteworthy is the colour of the sky :P
Depending on what time you visit this blog the sky shows different colours, light blue during hours of sunlight, fading to dark blue in the depths of night.
The way we achieve this is by first creating a div to contain the skyline image and assigning it a class, in my case I have used the following:

<div class="sky"></div>

Next we have to alter the style.css file on the fly by using PHP to get the time and assigning a variable value to the colour of the div.
The way we do this is by replacing the style.css file with a style.php file that outputs a css file when called.
Sounds a but complicated but it really isn’t.
Simply open your style.css file and add the following to the top of the file

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

Now save the file as style.php and presto we have a dynamically alterable css file!
So let’s define the div style in the file by adding the following to the bottom of the style.php file

div.sky {
    background: #<?php echo $shade; ?>;
    padding: 0.5em;
    border: none;
width: 924px;
height: 188px;
position: static;
  }

So this means that the background colour of the div will be defined by whatever value we give to the php string $shade.
To generate a different colour depending on the time of day we can use the php function date() to output the time as a number then run some if statements against that number. In my case I used the date() function to get the current hour as a number then assigned different shades of blue to the the background, like so:

$skycolour = date("H");
if ($skycolour <5){
$shade = "000033";
}
elseif ($skycolour == 5){
	$shade = "071447";
}
elseif ($skycolour == 6){
	$shade = "0d275a";
}
elseif ($skycolour == 7){
	$shade = "133a6d";
}
elseif ($skycolour == 8){
	$shade = "194d80";
}
elseif ($skycolour == 9){
	$shade = "206093";
}
elseif ($skycolour == 10){
	$shade = "2673a6";
}
elseif ($skycolour == 11){
	$shade = "2c86b9";
}
elseif ($skycolour == 12){
	$shade = "3299cc";
}
elseif ($skycolour == 13){
	$shade = "3299cc";
}
elseif ($skycolour == 14){
	$shade = "3299cc";
}
elseif ($skycolour == 15){
	$shade = "2c86b9";
}
elseif ($skycolour == 16){
	$shade = "2673a6";
}
elseif ($skycolour == 17){
	$shade = "206093";
}
elseif ($skycolour == 18){
	$shade = "194d80";
}
elseif ($skycolour == 19){
	$shade = "133a6d";
}
elseif ($skycolour == 20){
	$shade = "0d275a";
}
elseif ($skycolour == 21){
	$shade = "071447";
}
elseif ($skycolour > 21){
	$shade = "000033";
}

Finally to add the skyline over the top of the background colour in order to create the effect of the sky changing colour in the city.
First we must create the image and make sure it has a transparent background this will mean you need to save it as a file that supports transparency, I would suggest saving it as a PNG.
Example:
Image with a transparent background

Image with a transparent background


Upload the image to the root of you website or somewhere memorable and make the following changes to the style.php file:

div.sky {
    background: #<?php echo $shade; ?>;
    padding: 0.5em;
    border: none;
background-image:url('http://www.danclarkie.co.uk/clear.png');
background-position:left bottom;
background-repeat:no-repeat;
width: 924px;
height: 188px;
position: static;
  }

Next uplaod the style.php file to the same folder as you exisiting style.css file.
And finally look at the template files of your website (99% of the time this will be in a file called “header.php”) for the following line:

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

And replace it with:

<link rel="stylesheet" type="text/css" media="all" href="style.php" />

Now wherever in your site you add the line:

<div class="sky"></div>

You will get the following (time lapsed)
berlin skyline

Cool eh!