CSS: Replacing Text with Images

I’m not a CSS guru, so if this is considered bad, I don’t care.

I think the typical way is something like this:

<div style="background:url('AboutUs.jpg');">
	<span style="display: none">About Us</span>
</div>

This assumes you’re creating the markup. What if your skinning a WordPress blog and you don’t want to touch the php that creates the markup? You could be stuck with something like:

<div id="aboutus">About Us</div>

So far, I find this css hack works pretty good in IE, Firefox, and Safari:

#aboutus {
	background: url('images/aboutus.jpg') no-repeat;
	font-size: 0px;
	text-indent: -1000px;
	width: 100px;
	height: 25px;
}

p.s. The reason for starting with text and replacing it with an image is for accessibility and SEO.