Hourly Background Images in Expression Engine
By Joshua on January 25 2010
One of my favorite things about the new Design Pepper site is the background images. What's so special about the background images? They rotate every hour.
While the concept isn't particularly groundbreaking I think the different images add a touch of freshness for returning visitors. Here's how you do it.
In your EE template edit the opening HTML tag as follows:
<html class="background-{current_time format="%h"}">This will produce a class of "background-01" to "background-12" depending on the time. If you want 24 different images, just capitalize the "%h" above (= "%H").
Now in your CSS produce a series of styles like the following for each class:
.background-01, .background-01 body {
background-image: url('01.jpg');
background-color: #004861;
}The background-color matches the color I used to fade out from the background-image, so that users with huge monitors wouldn't just see a harsh line or a repeating image.
The styles are applied to both the HTML and BODY elements to minimize the possibility of the background ending short of the viewport.
There you have it. A simple way to specify hourly background images in Expression Engine.