Different CSS background-image depending on month

问题:

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?*

回答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.

回答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>

回答3:

You could also use JavaScript/jQuery to get the date, month, and year from the user. Doing something like they do here: http://arnelbornales.wordpress.com/2009/02/25/get-the-current-date-using-jquery/ then using something like an if statement to determine which month and then change the source of the image.

回答4:

Something like this using a bit of jQuery

var fullDate = new Date();
var month = fullDate.getMonth();
var year = fullDate.getFullYear();
var img = 'month' + month + '_' + year + '.png';

$('#monthly').css('backgroundImage', img);

Assuming your div is

<div id="monthly">
</div>   

回答5:

No need for any javascript and special css treatment.. Use

<div style="background-image:url(images/bg-<?php echo date("Y"); ?>);">content</div>

回答6:

After trawling for a solution that actually worked and was really simple to implement if found the script below. Simply copy and paste it into a .js file and link to it in your head tag:

var s = new Date();
 var month = s.getMonth();

switch (month)
{
case 0:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/january.css" />');
  break;
case 1:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/february.css" />');
  break;
case 2:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/march.css" />');
  break;
case 3:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/april.css" />');
  break;
case 4:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/may.css" />');
  break;  
case 5:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/june.css" />');
  break;
case 6:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/july.css" />');
  break;
case 7:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/august.css" />');
  break;
case 8:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/september.css" />');
  break;
case 9:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/october.css" />');
  break;
case 10:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/november.css" />');
  break;
case 11:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/december.css" />');
  break;  
default:
  document.write('<link rel="stylesheet" type="text/css" media="all" href="http://the-path/to-your/stylesheets/folder/style.css" />');
}