Last Updated: 01 Nov 2023

   |   

Author: 114.119.141.127

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
Last revision Both sides next revision
front-end-tech:css:image-replacement-technique [Nov 10, 2008 07:38 PM]
dordal created 		front-end-tech:css:image-replacement-technique [Oct 24, 2023 09:04 PM]
111.225.148.57 removed
Line 1: Line 1:
 += CSS Image Replacement =
  
 +There are quite a few cases when you'll want to use an image for a headline, section header and the like, but want to keep a text 'backup' so that search engines and screen readers can understand what the headline says. You can do this with a CSS image replacement technique.
 +
 +Basically, you create a text header, and then use a CSS class to ''text-indent'' the text way off screen, and replace it with an image:
 +
 +<code html>
 +<h1 class="myHeadline">
 +  Really Important Headline
 +</h1>
 +</code>
 +
 +<code css>
 +h1. myHeadline {
 + width: 500px; height: 40px;
 + background: url("images/really-important-headline.jpg");
 + text-indent: -9999px;
 +}
 +</code>
 +
 +**N.B.:** This image is called the **'Phark' method**, and is the most popular method in use today. However, it is far from the only one: CSS Tricks has an [[http://css-tricks.com/nine-techniques-for-css-image-replacement/|excellent summary of the top nine]].
 +
 +**N.B.:** There is also some difference of opinion as to whether this constitutes a 'black hat' SEO technique, since you're hiding text. General consensus is that it is OK to use it occasionally (e.g. a few headlines, your logo, etc.), but don't go overboard.