CSS-Tricks Example

The Old Way

This way uses a header tag with a unique ID to kick the text off the page and replace it with an image.

CSS-Tricks

HTML:

<h1 class="main-logo">CSS-Tricks</h1>

CSS:

h1.main-logo {
	width: 350px; height: 75px;
	background: url(images/header-image.jpg);
	text-indent: -9999px;
}

PROBLEM:

If you turn CSS off, this will just degrade into text. Not a bad thing, but just because someone has their CSS turned off doesn't necessarily mean they don't want images either.




The NEW Way

CSS-Tricks

HTML:

<h1 class="main-logo"><a href="#"><img src="images/header-image.jpg" alt="CSS-Tricks" /></a></h1>

CSS:

Same as above.

WHY THIS IS BETTER:

With CSS Turned off you can still display an image. With CSS and images turned off, you will still get the ALT text from the image. You can even use a different image inside than you used for your CSS image, if there is a good contextual reason to do so.