CSS Image Replacement

CSS Image Replacement

From TUMRAI [QuickNote]

Jump to: navigation, search

CSS Image Replacement is a web design technique that calls a logo or specific image via the CSS stylesheet, while hiding some text behind it on the web page.

The normal code for a logo would look like this:

<h1 class="logo">
<img src="images/logo.jpg" alt="logo name" />
</h1>

Using the CSS Replacement technique, first you would create a CSS class that would look like this:

h1.logo {
width: 300px; height: 50px;
background: url(images/logo.jpg);
text-indent: -9999px;
}

And then you would call the logo on the web page with the following code:

<h1 class="main-logo">Logo name</h1>

The visual result would be the same in both cases, but with the CSS Image Replacement you would have the “logo name” text hidden in the page.

This article, the author is still working on this document, so Can't edit this without the author's permission.