Image Replacement Technique

Image replacement is being used all over the web today. It is used anytime designers want to place images where text would normally be, hence the name “image replacement”.  The most common uses are logos and buttons. This is a time honored tradition among developers that has evolved over time for purposes of bettering the web and how we code it.

There are many ways to do an image replacement but I would like to show you my two favorite ones to use.

The first one is the one I use on a normal basis. I have picked it up from various developers and not sure who to give credit to.

First Technique


<h1>
<span></span>
My Logo
</h1>

h1{
width: 300px;
height:30px;
position:relative;
overflow:hidden;
}
h1 span{
position:absolute;
width:100%;
height:100%;
background: url("images/logo.gif") no-repeat;
}

For this technique we are turning the span tag into a block element, placing a background image in it, and placing it over the text inside the h1. What is great about this technique is that it leaves the text right where it should be on the page. You can also go as far as styling the text that would be there just in case the image doesn’t show up or the user has images turned OFF.

The only drawback to this technique is the use of PNG images. Obviously if you were to use a PNG image the text underneath would show through…and this is where the other technique steps in.

Alternate/ Second Technique

This replacement technique is courtesy of Seamus Leahy and Stuart Langridge.


<h1>
My Logo
</h1>

h1 {
width: 300px;
padding: 30px 0 0 0;
height: 0px;
background: url("images/logo.png") no-repeat;
overflow: hidden;
}

With this technique we are pushing the text out of view by making the height: 0px and the overlay:hidden the “height” of the h1 is then replaced with padding. This leaves you with a blank box to add a background image to.

Like I said I only use the second technique when dealing with PNG images that allow the text to show through which really isn’t that often.

Both of these techniques are built around useability. The text is still on the page for screen readers and search engines which is what every good developer should be practicing.

Do you have a favorite technique to share? Let us know about it.

Zach Katkin
Zach Katkin
Zach Katkin is the co-founder & CEO of Atilus. He is a Certified Google Professional, author, and lover of technology. He helps Atilus stay out ahead of online marketing trends and loves driving results for Atilus' clients.

Leave a Comment

 

Recent Comments | 0 Comments
Recent Posts

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.