Transparent text to let image show through

An idea's rattling around the back of my head, help me knock it out! ;)

[MatthewHSE]

I had an idea a few minutes ago that could result in some pretty neat text tricks. The basic concept is to set a background image, with transparent text, so that the background image "shows through the text." You could create "wooden" or "metal" headings and I think it could look really sharp.

However . . .

I haven't been able to come up with a way to do it! ;(

I can't figure out a way to hide the background image, but let it show through the text. For instance, set a background image for a <h1>, and set the background color to white and the color to transparent. For one thing, the background image will show up over the background color anyway.

In fact that's the problem all the way around. I've thought through using wrapper divs, etc., but I can't seem to work out that one little problem.

To be perfectly honest, I've come to the conclusion that my idea, brilliant though it may sound at first, simply can't be done because of the order in which background images, background color, and foreground color are applied. But I couldn't think of a better place to get the dire confirmation . . . ;)

Has anyone else played with ideas like this, and are there any breakthroughs to share?

[Old_Honky]

If you are only using a small amount of text why not make a gif or png image of the text and make only the text colour transparent. Then use two identically positioned divs and use z-index to put the transparent text div on top.

[MatthewHSE]

That would work for text replacement, but it would require a separate image for each heading. I was trying to work out a method that would be more extensible than that, by which a background image could be used for any text - meaning you could use the same rectangular background image and CSS class for many different headings, etc. If you could get the background image to "show through" ONLY the text, while a background color covered up the rest of the background image, you could create "fancy" text-only headings without needing a separate image for each one.

[jfjet]

Try making 26 individual images: one for every alphabet, and each has transparent text to show the background. Then basically just play "alphabet soup" with the letters, while keeping them in a div with the background of your choice.

[jfjet]

Or, you may wanna read up on SVG, though it isn't very poplular at the moment. Just google it.