Serif Header

This example shifts some things around so that this proof-of-concept holds up in more test scenarios. Like before, the vertical rhythym of the page is still very much neccessary for the technique to work.

All of the sizes have been moved from pixels to ems, which is why the line is thick now, and not perfectly centerd (The extra math isn't worth the effort for a quick demo). Of course, any design relying on the position of background images, but using EMs for size, you'll hit some trouble if the base font size changes.

Tested in Chrome, Firefox, and Opera on linux, and Chrome and IE8 on Windows 7. I don't have anything else handy right now. IE8 does tend to render the lines in the wrong place in this split-view though. Switch to the Render tab to see it working fine.

Sans-serif Header

There's a slight issue, sometimes, when the heading has an even pixel width, and the container has an odd width, in which the background ends up off by one pixel while resizing. This is the only heading of the 5 I saw it on though.

Monospaced Header

By now the heading font has changed 3 times, and has not had an effect on the brackground, because the browser uses the set font size in height calculations, not the apparent font size. DPI and x-height just don't factore in.

Another Header

Because this example uses a consistent basline grid, and the height of the background image is the same as the grid, the effect doesn't break as more headings are added.

And One More

See? It just keeps working. The different browseres seem to size the span slightly differently, which is why I've switched to making sure the vertical center of the span is in the right place, and then vertically centering the background.