That certainly would be tough. You'd probably have to go pixel-based font sizing and use a specific line-height that is equal to the height of your repeatable background.
I don't get the difficulty... all I see in that screen shot are caps with an underline. Wouldn't just using text-decoration: underline; work? Am I missing something?
@Mottie - specifically for a design like that, not really. Because the line is a certain distance from the words, I'm not sure you can adjust the underline.
Not entirely solved, I can't seem to find a way to decrease the distance with negative padding, relative positioning and line-height. Increasing it works fine tho.
Example: http://s.rough.dk/DQdG
Scalable background-img?
text-decoration: underline;work? Am I missing something?Edit: It's not perfect though.
Edit: http://jsfiddle.net/TFW2E/4/ Line-height sorts it out
http://jsfiddle.net/Mottie/TFW2E/5/
Edit: Oh and I did discover that the specs include a "text-underline-position" (ref), but it doesn't seem to allow adjusting it by a pixel distance.
@mottie, no - not necessarily a big thing, but you know… the details ;-)
Thanks all of you!