wordpress, css, and images

So, a while back I switched from using a hand-written (in PHP) theme to using this awesome little piece of code that generates a semantically useful page that can then be CSS styled. On another site still under development, I wanted to use a graphical header, but without changing the header.php. My thought immediately turned to FIR, a CSS trick to use background-image and display: none; to show an image in place of text.

The problem was two-fold. One, you still have to modify the template a little bit, and two, FIR is actually worse for its stated purpose (exposing text to screen readers while showing the graphic to most users) than a simple image + alt tag.

The new solution, as outlined here, here, and here is to play text overflow games to make the text disappear, use CSS height and width to make the element otherwise match the image size, and use background-image to show the image. For some reason, I couldn’t get the image center without making the header 100% width which is fine for my site but might not work for you. Use the image height as the height: below.

Here’s the CSS code I’m using to make this work in a sandbox skin:

#blog-title a
{
        width: 100%;
        height: 84px;
        display: block;
        align: center;
        background: url("/header-image.png") top center no-repeat;
        border: none;
        text-indent: -5000%;
}