Results 1 to 16 of 16
  1. #1
    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>
    and think no more about it. If we really want, we enclose the image in an <h1></h1> element, but that's about it.

    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>
    or even better, this:

    Code:
    <div id="masthead">
    <h1>My Company</h1>
    </div>
    and control the appearance of the logo (and subsequent disappearance of the text) via CSS.

    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>
    The CSS
    Code:
    #masthead h1 {
    background:transparent url("/images/mylogo.png") no-repeat top left;
    width:150px;
    height:50px;
    }
    
    #masthead h1 span {
    display:none;
    }
    The text is placed within <span></span> tags, which are then instructed via the CSS to not display. Solid support across browsers, but adds redundant non-semantic <span></span> tags to your markup.

    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>
    The CSS
    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 */
    }
    Less solid support than "Classic FIR", above. IE5's support is a bit flaky, for example. 5.5 and above is fine, but avoid if you support IE5 (or until IE5 finally dies).

    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>
    The CSS
    Code:
    #masthead h1 {
    text-indent:-100em;
    overflow:hidden;
    background: transparent url("/images/mylogo.png") no-repeat top left;
    width:150px;
    height:50px;
    }
    Support unknown (by me!) at present. Seems extremely simple, and may offer the best compromise if browser support is solid. Doesn't appear to require a redundant <span></span> element.

    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.

  2. #2
    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

  3. #3
    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!

  4. #4
    Join Date
    Dec 2002
    Location
    The Shadows
    Posts
    2,925
    I have confirmed that all of these work as "advertised"
    Dan Sheppard ~ Freelance whatever

  5. #5
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    707
    Jolly good...glad to hear it!
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

  6. #6
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    707
    Quote Originally Posted by DanX
    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
    2 points:

    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.
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

  7. #7
    sounds cool.

  8. #8
    yea, it looks very handy, ill try it real soon

  9. #9
    Excellent post

  10. #10
    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.
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

  11. #11
    very nice info

  12. #12
    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.
    When I'm on a low-bandwidth connection, I'm one of those people who turns off images. So to me, it's important that the text remain in place and visible, and is covered by the image to hide it instead of being set to display:none or moved off the page.

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

  13. #13
    thanks for the tut

    for replacement I prefer to use 2 images and a simple #id:hover
    *¨) ¤ BHS-D¤
    .·´ .·*¨) .·*·. *
    (¸.·´¸.·*¸ ¤ www.bhsdesign.com¤

  14. #14
    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
    Uh, replacing one image with another is not the same thing as the topic of this thread, which is using CSS to replace text with graphical text, for the purpose of making a heading appear as a custom font instead of something common like Arial.

    We're talking about replacing text with an image upon page load, not a hover effect.

  15. #15
    nice tut, that's exactly what I was looking for

    thanks again

  16. #16
    Thanks for the tips..

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •