Image Replacement

Back in the day when I first wrote on this, I was obviously in my "infantile and retarded" stages of coding. Because now, looking back, much of my previous code was unnecessary bloat (hopefully I don't think the same of this update in two years time). So, needless to say, I've updated this tut. Below, are the two best and easiest ways to perform an image replacement technique (in my opinion anyway). Each work seemlessly in ALL conceivable situations (CSS On/Images On, CSS Off/Images On, CSS On/Images/Off, CSS Off/Images Off).

Image Replacement Technique #1 (and Demo) was created by Paul O'B, and is most certainly the most widely used technique today. This technique simply places the absolutely positioned image over the top of the text. Works perfect in all browsers!

The HTML


<h1>Header Text<b></b></h1>

The CSS

h1 {
position:relative;
height:100px; 
width:700px;
line-height:100px;
text-align:center;
overflow:hidden; 
border-bottom:1px solid;
}
h1 b {
background:url(image.jpg);
position:absolute;
left:0;top:0;
height:100px; /* height of image */
width:700px; /* width of image */
}

Image Replacement Technique #2 (and Demo) was created by me (Eric Watson). I first thought of it while working on a sprites demo (...Or Even Better!) , and know I've just taken it out of the sprite configuration and simplified it. This technique simply places the text behind the image via a negative z-index. Works perfect in all browsers! The only thing to note is, the containing block (in this case the body), must be given position relative and a z-index of 1 in order to set a correct stacking order. "If" the containing block is not given a background color, this extra measure is not nessesary, but obviously, most are going to want a background color of some sort.

The HTML


<h1><b>Header Text</b></h1>

The CSS

body { /* must create stacking order on contaning block */
position:relative; 
z-index:1;
}
h1 {
background:url(image.jpg);
height:100px; /* height of image */
width:700px; /* width of image */
overflow:hidden;
text-align:center;
line-height:100px;
border-bottom:1px solid;
}
h1 b {
position:relative;
z-index:-1;
}