Different CSS background-image depending on month and year

Question

Basically, I have a div with text in it, and I want the background to display a different image depending on what month and year it is.

How can I achieve this? Any help would be greatly appriciated!

---

*I've prepared 4 years worth of monthly images labelled "month0_2011.png" to "month11_2014.png" already if that helps?*

Answer 1

Add a .php extension to the CSS and use PHP code to determine that. Just use standard PHP tags.

For example:

body
{
    background-image:url('<?php echo $currentImagePath ?>');
}

Where $currentImagePath is the path to your image, determined beforehand (i.e. top of page) using PHP.

$currentImagePath = $_SERVER['DOCUMENT_ROOT'] . "/css/images/" . "month" . (date("n") - 1) . "_" . date("Y") . ".png";

Putting it all together:

<?php
header("Content-type: text/css");
$currentImagePath = $_SERVER['DOCUMENT_ROOT'] . "/css/images/" . "month" . (date("n") - 1) . "_" . date("Y") . ".png";
?>

body
{
    background-image:url('<?php echo $currentImagePath ?>');
}

All that is left is adjusting the path to fit your configuration.

Answer 2

You could add a script on the top of yout page:

<script type="text/javascript">

var currentTime = new Date();
var month = currentTime.getMonth(); 
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var backgroundpictture= "month" + month  + "_" + year + ".png";
document.body.background = backgroundpictture;

</script>