The header background image is applied to a span which is then absolutely placed so that the span sits on top of the normal text and hides it. If styles are disabled the image disappears and the header text is revealed. If images are disabled then the header text still shows through. If both images and css are turned off thenv the header text appears as normal.
Try it. Turn images off, or css off, or both off and the header text will still appear and make sense
The drawbacks are the extra span required to produce this effect.
Other replacement methods that move the text off screen or use display:none etc will fail when images are off but css is still on. The above method doesn't suffer from this problem and users will always get something.
Screen readers will still read the header text as it is in the code in the normal place.
The main drawbacks are the extra non-semantic span and the fact that you can't use this technique with transparent images otherwise you would see the text underneath (although in some cases you could shim another inage between the text and the replacement image but then it's adding more code and you lose the advantage of not using an image in the first place).
View source for the full code as the CSS is in the head
See the following example if you wish the header (or image) to also be a link.