I was a little surprised that this new image replacement – or, should I say “placement” – technique didn’t get a little more press when it came out as it looks pretty interesting.

The limitation of traditional image replacement techniques are well documented.

However, according to Thierry, the author, the Thierry Image Placement technique gets around all of these issues by adopting a slightly different approach which centers upon the inclusion of a 1×1 px transparent image along with the text to be replaced.

<h2><img src="/img/clear.gif" alt="" />Hello World&lt;/h2>

Hello World

This image is then used as the hook for applying the desired background image:

h1 {position:relative}
h1 img {
z-index:1;
position:absolute;
top:0;
left:0;
width:538px;
height:1.7em;
min-height:28px;
background:transparent url(/img/helloworld.gif) no-repeat;
border:1px dotted red
}

Conclusions

This is definitely an interesting technique, although my first impulse is to shy away from adding transparent gifs to my HTML – having discontinued this practice for so long, it’s hard to go back.

So, I’m not whether to adopt this one or not. My sense is that if you want to replace text with images, the best way to go about it is to use sIFR because it is so elegant and easy to employ across a whole site.