CSS: Replacing Text with Images

Firstly, if you are not using SSL for all your sites, you should step it up! NameCheap's SSL certificates start at only $9. There's no excuse!
Firstly, if you have not tried Digital Ocean's SSD Virtual Servers for only $5/mo, I highly recommend them!

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>

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.

About this entry

Good Reads