Around Christmas, I had a client ask for masthead imagery that would automatically swap in/out based on the time of year. Here is the HTML/PHP I used:
<div id="masthead" class="month-<?php echo date('m'); ?>"></div>
And here is the CSS:
#masthead {
width:300px;
height:100px;
}
.month-12, .month-01, .month-02 {
background:url(/images/winter.jpg);
}
.month-03, .month-04, .month-05 {
background:url(/images/spring.jpg);
}
.month-06, .month-07, .month-08 {
background:url(/images/summer.jpg);
}
.month-09, .month-10, .month-11 {
background:url(/images/autumn.jpg);
}
There are a number of ways to format the date info, but numerical seemed the only way to avoid any language barriers.
9:28 pm
This is a surprisingly simple solution. Thanks for sharing it.
Also, for another implementation of a similar concept, check out ShaunInman.com (if you haven’t seen it). He has the background a different color depending on the month that the page is from. I’m going to guess the implementation’s about the same.
3:35 am
I’ve seen tutorials to do something similar with javascript, but this way is worlds more simple. At one point, I was trying to figure a way to do this with time of day and the background of the entire page and/or header image. Didn’t feel like messing with the javascript, though.
Thanks to the lightbulb you turned on, I might have to revisit it.
1:11 am
That’s pretty handy, I suppose with some if statements it’s possible to get it running for each category/single post pages with another image too?
2:26 pm
Just wondering why you didn’t use the actual coding to produce the entry. Investigation of your page soure shows that to top (Xmas) picture is not in a at all, but merely a .
Still, a good implementation of css.
4:04 am
Познавательно! Ротуда Ñ‚Ð°ÐºÐ°Ñ Ð¸Ð½Ñ„Ð° , еÑли не Ñекрет.;)?
6:47 pm
Ð’Ñе гениальное проÑто!!! :) Thanks for idea :)
7:41 pm
Nu kak skazat, ne so vsem soglasen, no v principe normalno