Best method for header images and text?

[blueocto]

I've heard and read about several techniques, to use a header image and still have header text for semantic purposes, including the text-indent, flash methods, etc.

I came across this link [ws] Replacing Text By An Image | Náhrada textu obrázkem recommended by CSSCreators readers.

Is this the best method? If not, why not?
What method do you use?

[graphicsAZ]

I like the method that Petr is explaining on that page, but it doesn't seem that much different from adding a img tag into H2 and put the "text" you want in the alt attribute? The first is more CSS oriented, but both methods return the same result....text in the place of a missing image.

[Scriptage]

The first is more CSS oriented, but both methods return the same result....text in the place of a missing image.

No the result is absolutely not the same, using the technique in the article you retain the semantics of the document structure by keeping the heading as text; it's good for SEO etc.

[Harry]

Use this: Web Design+ — Tips and advice on web standards development and more in depth, this: Ultimate Image Replacement — The Harry Roberts Method?

[blueocto]

Harry, on your page "Ultimate image Replacement - The Harry Roberts Method?" and I quote:

Obviously when it is disabled, users will see an embedded image as well as text.

Doesn't this mean that you would have say <h1>My Website Name</h1> sitting over an image that might well say "[icon img] My Website Name" therefore, it's not really solving the issue?

I'm not having a go, just trying to learn and understand.

[Harry]

My method is best for h1 logos, you get the company name in the h1 as raw html, but you also get the actual image of the logo too when it comes to print (or with screen CSS disabled). For other instances use the first one I linked.

EDIT: I used my method here, look at the logo and disable styles.

[blueocto]

Ah right I see, so compared to example 2, on the link I mentioned in post #1, is that
- its the same when images are disabled,
- but, when styles are disabled you still get to see the logo

:D Nice one!

[Harry]

Basically:
My first link will allow all combinations of CSS/images on/off
My second link will allow all combinations of CSS/images on/off and leave an embedded image for printing.

[thebluefox]

I've not clicked any links, but the best way IMO is to use background/text-indent on a h1/h2/whatever tag. This keeps search engines happy, and means when styles are disabled you get a standard header tag.

[Harry]

I've not clicked any links, but the best way IMO is to use background/text-indent on a h1/h2/whatever tag. This keeps search engines happy, and means when styles are disabled you get a standard header tag.

Nope, that's not the best way. When images are disabled you can't see anything as the text is like -9999px off screen ;)