Results 1 to 16 of 16
Thread: How to use CSS Image Replacement
-
01-20-2004, 06:37 AM #1Web Hosting Master
- Join Date
- Jan 2003
- Location
- Houston, TX - Originally from UK
- Posts
- 707
How to use CSS Image Replacement
How to use CSS Image Replacement
(NB: These techniques assume a reasonable knowledge of HTML and CSS. Some require better browsers than others, but most should work in IE5 and above, Netscape 6+ and Opera 6+. I said most!)
There are various techniques that allow a designer to replace standard text with an image. But why would we want to do this in the first place?
The Whys
Consider this:
We all have a logo. It's one of the most enduring features of any website. Currently, most of us code our logo something like the following:
Code:<div id="masthead"> <img src="/images/mylogo.png" alt="My Company" width="150" height="50" /> </div>
The approach we're all used to is fine. It works solidly and is perfectly functional. So why go messing around with it?
My answer is simple (though others have their own reasons for doing this): Search engines prefer text. So instead of that image tag, why not simply do this:
Code:<div id="masthead"> <h1><span>My Company</span></h1> </div>
Code:<div id="masthead"> <h1>My Company</h1> </div>
The Hows
Yes there's more than one way to skin a cat. Bear with me.
1. The Fahrner Image Replacement (FIR) Technique
The classic. Easy to implement and just works. Which is nice.
The HTML
Code:<div id="masthead"> <h1><span>My Company</span></h1> </div>
Code:#masthead h1 { background:transparent url("/images/mylogo.png") no-repeat top left; width:150px; height:50px; } #masthead h1 span { display:none; }
2. The Leahy/Langridge Technique
More complicated. Involves setting padding for the height of the image, hiding overflow to get rid of the text, setting height to 0 for good browsers, but overriding that for IE5, because IE5 needs a height definition. But this technique doesn't require an additional <span></span> element in the HTML.
The HTML
Code:<div id="masthead"> <h1>My Company</h1> </div>
Code:#masthead h1 { width:150px; padding:50px 0 0 0; overflow:hidden; background:transparent url("/images/mylogo.png") no-repeat top left; height:0px !important; /* for most browsers */ height /**/:50px; /* for IE5 */ }
3. The "Off-Screen" Technique (Credit Unknown)
A technique that is remarkable in its simplicity. The idea is to "push" the text off the left hand side of the screen using text-indent with a negative value. Then the element is set a background-image as before. To stop any text leaking through accidentally, we also set overflow to hidden.
The HTML
Code:<div id="masthead"> <h1>My Company</h1> </div>
Code:#masthead h1 { text-indent:-100em; overflow:hidden; background: transparent url("/images/mylogo.png") no-repeat top left; width:150px; height:50px; }
The Problems
There is one problem with all these techniques, but its severity is minor. All the techniques fail to show anything at all if a user agent visits the page with CSS turned on but images turned off.
How likely this is to be is a matter for individual designers to decide. I am of the opinion that anyone who would know how to turn on and off CSS and images in a browser is likely to be savvy enough to realise their own settings may be the problem. Most (non-web) folk leave their browser settings at the default.
A further issue is accessibility. Alistapart's article, (by Joe Clark) expands on this further.
Conclusion
A powerful and easy-to-use technique that could theoretically improve your search engine rankings through the use of real headers. Has accessibility issues, and a few browser problems with some interpretations. Use with care, and in moderation.
Oh, and do some reading about the pitfalls!Last edited by Zopester; 01-20-2004 at 07:31 AM.
-
01-20-2004, 05:45 PM #2Web Hosting Master
- Join Date
- Dec 2002
- Location
- The Shadows
- Posts
- 2,925
I like this. It looks alright. There certainly isn't any security problems with it. Give me a few hours to test it out and give my stamp of approval...
Dan Sheppard ~ Freelance whatever
-
01-20-2004, 06:22 PM #3Web Developer
- Join Date
- Feb 2003
- Location
- Connecticut
- Posts
- 5,460
Very nice tutorial. However, I would suggest using this method for presentational images, but for any image that could be replaced with text, you should use <img/>. This is mostly for accessability. To each their own, though!
-
01-20-2004, 08:52 PM #4Web Hosting Master
- Join Date
- Dec 2002
- Location
- The Shadows
- Posts
- 2,925
I have confirmed that all of these work as "advertised"
Dan Sheppard ~ Freelance whatever
-
01-20-2004, 09:36 PM #5Web Hosting Master
- Join Date
- Jan 2003
- Location
- Houston, TX - Originally from UK
- Posts
- 707
Jolly good...glad to hear it!
-
01-20-2004, 09:38 PM #6Web Hosting Master
- Join Date
- Jan 2003
- Location
- Houston, TX - Originally from UK
- Posts
- 707
Originally Posted by DanX
1. You've got it backwards. This is not for replacing an image with text, but for replacing text with an image.
2. It's definitely NOT for accessibility, as the article I linked to quite clearly states.
-
01-27-2004, 10:43 AM #7Newbie
- Join Date
- Jun 2003
- Posts
- 25
sounds cool.
-
06-13-2004, 05:54 PM #8Disabled
- Join Date
- Jun 2004
- Posts
- 5
yea, it looks very handy, ill try it real soon
-
06-14-2004, 02:12 PM #9Newbie
- Join Date
- Jun 2004
- Posts
- 7
Excellent post
-
06-15-2004, 03:38 AM #10Web Hosting Master
- Join Date
- Jan 2003
- Location
- Houston, TX - Originally from UK
- Posts
- 707
As an update, I've started using a version of technique 3 - mentioned in my initial article - on the redesigned version of my site. The only difference to the above technique is that I've omitted "overflow:hidden" as this causes IE/Mac to bork on the code. To make certain no text will ever "leak" on to the page, I've also set the text-indent to -9999px.
So far, this seems to be the best of all the CSS image replacement techniques I've tried.
-
04-15-2005, 10:09 PM #11Newbie
- Join Date
- Apr 2005
- Posts
- 6
very nice info
-
05-06-2005, 01:44 AM #12rogue element
- Join Date
- Jun 2004
- Location
- Northwest Colorado
- Posts
- 4,636
Re: How to use CSS Image Replacement
Back in the day, if I wanted to use graphical text, I'd stick an <img> tag in with the text as an alt attribute. This howto introduced me to the modern technique of CSS-based image replacement, thanks again Zopester!
Originally posted by Zopester
There is one problem with all these techniques, but its severity is minor. All the techniques fail to show anything at all if a user agent visits the page with CSS turned on but images turned off.
I expect many of my customers to access my sites on low-bandwidth connections, which increases the likelihood of my site being viewed with images off, so the text not being visible is a major concern for me.
There is an improved version of the Fahrner technique Zopester presented above, discussed here, which solves this problem:
http://levin.grundeis.net/files/2003...ernatefir.html
I'm using this on a site I'm developing at the moment, and I'm pleased with it despite the requirement of an empty <span></span>.
The techniques in this thread all require the image file to be updated if a change to the text is desired. Another drawback is the graphic text can't be selected, i.e. copied and pasted. These two drawbacks are addressed by the "SIFR" technique, which I came across a couple of days ago:
http://www.mikeindustries.com/sifr/
This technique uses Flash to replace the text, not relying on fixed image files, and allows the text to be selected.Eric J. Bowman, principal
Bison Systems Corporation coming soon: a new sig!
I'm just a poor, unfrozen caveman Webmaster. Your new 'standards' frighten, and confuse me...
-
05-06-2005, 08:09 PM #13Newbie
- Join Date
- May 2005
- Posts
- 13
thanks for the tut
for replacement I prefer to use 2 images and a simple #id:hover*¨) ¤ BHS-D¤
.·´ .·*¨) .·*·. *
(¸.·´¸.·*¸ ¤ www.bhsdesign.com¤
-
05-07-2005, 03:34 AM #14rogue element
- Join Date
- Jun 2004
- Location
- Northwest Colorado
- Posts
- 4,636
Originally posted by Dumb Genius
thanks for the tut
for replacement I prefer to use 2 images and a simple #id:hover
We're talking about replacing text with an image upon page load, not a hover effect.
-
11-12-2005, 06:43 AM #15Newbie
- Join Date
- Nov 2005
- Posts
- 7
nice tut, that's exactly what I was looking for
thanks again
-
08-31-2006, 12:09 PM #16Newbie
- Join Date
- Aug 2006
- Posts
- 5
Thanks for the tips..