CSS Image Replacement Tutorial
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 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 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;
}
