Cascading Style Sheets (CSS) make it very easy to replace text with an image. Here is the whole process described in as few words as possible:
Background Information
In CSS, “display:none” will cause that element and every child in it to disappear. There is nothing you can do to make one of the child’s element.
“background-image” give an element a background. This can be applied to just about every element.
Create the Elements in HTML
In your HTML, write this:
<h3 id=”title”>
<span>Here is the Title!</span>
</h3>
Create the CSS to replace the text with an image
In your CSS, write this:
/* Remove the Text */
#title span {
display:none;
}h3#title {
background: url(“image/url.jpg”) no-repeat top left;
height: 20px;
width: 100px;
}
And Bam! Your text has disappeared off of the page, and the H3 element is 20 pixels wide and 100 pixels tall. It also has an image for a background that is aligned in the top left corner.
I’ve seen that CSS Text Replacement technique described with two pages, so I thought I’d see how short of a blog I could make out of it.
And Now you know how to replace text with an Image!
On a side Note, I’ve also seen this done with: “text-indent: -5000px;” or “visibility:hidden”. These work, but I would stick with display:none. It’s the cleanest way to do it.
-I hope that helps you out with your CSS and Design Needs.
-Ashton Sanders