Различные фоновые изображения CSS в зависимости от месяца и года

Добавьте расширение .php в CSS и используйте PHP-код, чтобы определить это. Просто используйте стандартные теги PHP.

Например:

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

Где $currentImagePath – это путь к вашему изображению, определенный заранее (то есть верх страницы) с помощью PHP.

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

Объединяя все это:

 <?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 ?>'); } 

Все, что осталось, – это настройка пути в соответствии с вашей конфигурацией.

Вы можете добавить скрипт в верхней части страницы yout:

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

Вы также можете использовать JavaScript / jQuery для получения даты, месяца и года от пользователя. Выполняя что-то вроде этого: http://arnelbornales.wordpress.com/2009/02/25/get-the-current-date-using-jquery/, затем используя что-то вроде оператора if чтобы определить, в каком месяце, а затем измените источник изображения.

Что-то вроде этого, используя немного jQuery

 var fullDate = new Date(); var month = fullDate.getMonth(); var year = fullDate.getFullYear(); var img = 'month' + month + '_' + year + '.png'; $('#monthly').css('backgroundImage', img); 

Предполагая, что ваш div

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

Нет необходимости в javascript и специальной обработке css. Используйте

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

После траления для решения, которое действительно работало и было действительно просто реализовать, если нашел сценарий ниже. Просто скопируйте и вставьте его в файл .js и поместите в него свой тег:

 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" />'); }