Easy Date-Based Image Mastheads

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:

<img src="masthead.png" id="masthead"
class="month-<?php echo date('m'); ?>" alt="masthead" />

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.

13 Responses {+}

  1. Jan 27
    9:28 pm
    david

    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.

  2. Jan 28
    3:35 am
    tony

    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.

  3. Feb 1
    1:11 am
    milo

    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?

  4. Jun 8
    2:26 pm
    Gordon

    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.

  5. Aug 13
    4:04 am
    Igorek

    Познавательно! А отуда такая инфа , если не секрет.;)?

  6. Sep 4
    6:47 pm
    Stasko

    Все гениальное просто!!! :) Thanks for idea :)

  7. Sep 15
    7:41 pm
    alex

    Nu kak skazat, ne so vsem soglasen, no v principe normalno

  8. Sep 19
    8:54 am
    Avi

    Hey Darren,

    Do you have a demo example of this?I’d really love to see this in play….

  9. Sep 19
    8:55 am
    Avi

    Hey Darren,

    Do you have a demo example of this?I’d really love to see this in play….thanx

  10. Dec 22
    7:18 pm
    Odessa homeless

    Thanks for help. It need to my future work!

Trackbacks

  1. del.icio.us links fra 29. januar, 2008 » superevil.org
  2. Sonika’s blog » Как менять картинки в шапке в зависимости от времени года
  3. Меняем Шапку Блога Автоматом | Запах денег