CSS image replacement
For a long time, I never thought before throwing an image into a webpage. I know all the rules about not using images for spacing or layout, but no one ever warned me about using them for buttons or headers. Then I started working on a website where I wanted the non-CSS version to look nice for text/mobile browsers, and I discovered that images really screw things up without layout. I googled for placing images using CSS only, and I discovered image replacement. In CSS3, you’d be able to do something like this:
<h1 style="content: url(header.jpg);">Header</h1>
Unfortunetly, no browser implements CSS3, so a little hacking is in order. The nicest solution I came up with looks like this:
<h1>Header</h1>
h1
{
background: url(header.jpg) no-repeat;
overflow: hidden;
padding-top: 45px;
width: 186px;
/* WIN IE5 hack */
height: 133px;
voice-family: "\"}\"";
voice-family:inherit;
height: 0;
}
The trick is to pad the top of the box as the size of the image, then hide the overflowing text. As you can see, it requires some hacks to work in IE5, but to anyone who does web development, this should be no surprise. A cool benefit of this is the ability to add a title attribute to the h1 tag, which replicates the alt information you’d normally stick with an img tag. Thanks to Dave Shea for the information.