Polish Your Image

Image Replacement - No Span

Posted March 15th, 2010 by admin

Just came across a great image replacement solution: http://moronicbajebus.com/playground/cssplay/image-replacement/files/

I copy/pasted the following from their page:

"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."1

HTML

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

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; }

  1. 1. http://moronicbajebus.com/playground/cssplay/image-replacement/files/

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.

Free Quote

Featured

Acupuncture Wellness Center of Coral Springs

Dr. Jack Tobol of Acupuncture Wellness Center of Coral Springs asked Polish Your Image to redesign their gift certificate & brochure.

Read More...

Latest Work