Easy Date-Based Image Mastheads
January 27, 2008 ( 7 )
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.
Popularity: 2% [?]
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.
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.
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?
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.