Image Replacement Technique

Just a bit here for me to be able to keep this somewhere I shouldn't lose it! Many people seem to be sticking with the old "Phark" method of replacing text with an image, but this forces the text off screen and invisible if the images are turned off for whatever reason. It may end up being the best solution when fast internet is ubiquitous, but even now it feels a bit presumptuous that people (especially on mobile devices) would all have images downloading.

Anatoly's method is as below...


h1 {
width: 247px;
height: 27px;
line-height: 1em;
white-space: nowrap;
font-size: 100%;
overflow: hidden;
}

h1:after {
display: block;
content: url("logo.png");
width: 247px;
height: 27px;
margin-top: -1em;
}

/*IE hacking */
* html h1 {
background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML += '');
position: relative;
z-index: 1;
}

/*Now the simple and effective IE styling.*/

* html h1 span {
display: block;
width: 247px;
height: 27px;
background: url(logo.png) no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}


I would go one step further, however, and say that you could turn either the height or the width to something more variable as long as the image you were using (logo.png in this case) had "dead space" on it to cover the text up if it grew (due to people having higher text sizes set on their browser, for example), and get rid of that white-space:nowrap to enable the text to still be displayed. A min-height or width would have to be used, and IE can see this action using the following expression:


height: expression(this.offsetHeight > this.parentNode.offsetHeight ? '100%' : this.parentNode.offsetHeight +"px");