Image Replacement—No Span

Many of us have used the Background-Image to Replace Text method for inserting an image that is only really important to the layout through CSS. One of the downside of this method is the use of an extra span tag. But alas, no more. To achieve it with no span simple set the overflow to hidden, the height to zero, the padding-top to the height of the image, and the background-image to the image you want to display you can get the same effect.

Example

Example Text for the Image Replacement

HTML

<h3 id="ex1">Example Text for the Image Replacement</h3>

CSS

#ex1{ /*The image*/ background-image: url(ex1.gif); background-repeat: no-repeat; /*Hide the text*/ height: 0; overflow: hidden; /*Size of the image*/ padding-top: 133px; width: 243px; }

This works great in Windows Internet Explorer 6, Mozilla 1.4+, and Opera 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy of Dave Shea, by using Tantek's hack.

The revised CSS

#ex1{ /*Size of the image*/ padding-top: 133px; width: 243px; /*The image*/ background-image: url(ex1.gif); background-repeat: no-repeat; /*Hide the text*/ overflow: hidden; /* WIN IE5 hack */ height: 133px; voice-family: "\"}\""; voice-family:inherit; height: 0; }

More About Image Replacement

Return to CSS Play.

© 2003 Seamus P. H. Leahy
You may take and improve upon this.