Blogger: Image as Blog Header

I'm going to do a brief series about how I wound up customizing my Blogger template (styles and widgets) after switching to the Blogger beta. First up, how I replaced the header with an image.

Why customize it?

Like a lot of people, I prefer to use an image instead of text for the header of my blog. I also want it to be clickable and always be a link back to the "home" page of the blog, which is a widely-adopted convention.

But I do not want to simply encode an inline image. For reasons of accessibility, I prefer a normal H1 tag that gets translated to an image by CSS.

Since I've been trying to keep the look-and-feel of my old template, I started with this image from my old template. It's 790 pixels wide by 105 pixels high.

Widget modifications

Here are the modifications I made to the default "Header" widget to accomplish this. Data that is specific to my blog, and which you'll want to change if you copy this code, is displayed in red.

<b:widget id='Header1' locked='true' title='Header' type='Header'>
  <b:includable id='main'>
    <div class='titlewrapper'>
      <h1 class='title'>
        <a href='http://drewthaler.blogspot.com/'><span/><data:title/></a>
      </h1>
    </div>
    <div class='descriptionwrapper'>
      <p class='description'><span><data:description/></span></p>
    </div>
  </b:includable>
</b:widget>

Widget explanations

The original Blogger template had a conditional so that the header was only a link if we weren't on the main page already. I removed the conditional because I think it makes more sense to always make it a link.

The original template also used 'data:blog.homepageUrl' for the link, but this resolved to 'http://drewthaler.blogspot.com/index.html', which is redundant. I wanted the shorter and more future-proof URL 'http://drewthaler.blogspot.com/' so I changed the link manually.

I left the description code as-is, because I don't use it. You may want to do something different.

You'll notice a single <span/> tag in the middle. That's required for CSS image replacement.

Stylesheet modifications

Here are the CSS additions that go with it. These are additions to the original stylesheet.

/* Replace the header with a graphic on computer displays */
@media screen, projection, tv {
  h1.title {
    width: 750px;
    height: 89px;
    left: 0;
    top: 0;
    padding: 15px 0 0 40px;
    margin: 0;
    border-bottom: 1px solid black;
    z-index: 0;
  }
  h1.title a span {
    background: url(http://homepage.mac.com/drewthaler/images/blog-header.gif) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 790px;
    height: 105px;
    z-index: 1;
  }
  #sidebar {
    z-index: 2;
  }
}

Stylesheet explanations

The @media directive means that these styles should only be applied for certain types of media. For screen, projection, and tv renderers I prefer the nicer look. But they will not be applied for screen readers and printing.

I'm using the Gilder/Levin Method for CSS image replacement. In this method, the span does all the work: it gets resized and repositioned, and the image is displayed as a CSS background image for it. The image is clickable because it's on the span, and the span is inside the link tag.

The span is given a z-index of 1 so that it sits above the original H1. The H1 text is still there, hiding underneath at z-index 0. Then the sidebar is given a z-index of 2 so that it will float above the header image if the two overlap.

The pixel sizes (790px by 105px) are from the size of my image. The padding (15px 0 0 40px) and bottom border are in there to make CSS-on/images-off browsing still look acceptable. It's a personal preference and based on the size of my image and text, so you might need to tweak it for your setup. The H1's width of 750px is the image's width (790px) minus the horizontal padding (40px), and the H1's height of 89px is the image's height (105px) minus the vertical padding (15px) minus the one-pixel bottom border (1px).