We now have a slightly nicer banner, featuring a color scheme inspired by x180. Although the banner image (the first ever to be used in this layout) is centered, it can't be positioned just wherever due to the grid on top of which it lies. To get it to snap to the nearest cell (i.e. multiple of 7), a bit of JavaScript had to be used. By installing an onResize handler which tweaks the left margin of the banner image, we can dynamically position it as we see fit (observation: some browsers, like Safari, seem to invoke the onResize handler throughout a live resize, while Mozilla-based ones only do this at the end). The complete code to do this is:

var kGridSize = 7;
window.onresize = BannerReposition;
 
function BannerReposition()
{
    var banner = document.getElementById("banner");
 
    var bannerImage = document.getElementById("bannerImage");
    var offset = Math.round((document.body.clientWidth - bannerImage.width)/2);
 
    offset += kGridSize - (offset % kGridSize) - 1;
 
    if (offset < -1)
        offset = -1;
 
    bannerImage.style.marginLeft = offset + "px";
}
 
BannerReposition();