The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Yes. I use it on two of my sites, and have done for over 2 years now. However, I only do this where it makes sense to define the image as a background image. I wouldn't do this with an image that's used as an illustration, or a logo, or an image with text in it, for example. Only for images used as decoration.

The example you gave from Zeldman's personal site should be done with a background image. That should not have been done using an <img> tag, because the purpose of the image is to be a decoration in the background. However, the picture below it should be an <img>, because it provides content and not just background decoration.

I'm not a big fan of this technique, personally: (1) it requires you to change your CSS for each new link, (2) it only works in CSS capable browsers, (3) it requires useless markup, and, here's the big one for me, (4) it's redundant to both the <img> and <object> tags. XHTML already has the semantics for this. :-)

I'm not a big fan of this technique, personally: (1) it requires you to change your CSS for each new link, (2) it only works in CSS capable browsers, (3) it requires useless markup, and, here's the big one for me, (4) it's redundant to both the <img> and <object> tags. XHTML already has the semantics for this. :-)

~~Ian

In the example CosmicCatalyst posted:

1) What do you mean by this?
2) The image was a non-essential image. If the browser doesn't support CSS, the image won't show, just like the background colours, borders and fonts won't show.
3) Which useless markup?
4) What are you referring to?

Sorry, I don't really understand what you're referring to. I thought CosmicCatalyst was referring to the background image at the top of Zeldman's site, behind the text "Zeldman.com. Web design news and entertainment since 1995. ISSN #1534-0309.". Did you have a look at the HTML? It's actually quite clever.

I'm not a big fan of this technique, personally: (1) it requires you to change your CSS for each new link, (2) it only works in CSS capable browsers, (3) it requires useless markup, and, here's the big one for me, (4) it's redundant to both the <img> and <object> tags. XHTML already has the semantics for this. :-)

In Zeldman.com's case, it is an easy way to do the IMG rollover effect. For non-CSS capable browsers (if you are still using IE4/NN4, get with the program!), there is linked text that displays in the IMG's place:

This class "alt" is set to {display: none}, so it only shows up in non-capable browsers, pretty nifty.

In my case however, I am using this No IMG technique for the Style Switcher, which loads alternate stylesheets. I have Color Scheme One and Color Scheme Two, in which each require a different IMG, so putting the IMG in via CSS gives me an easy way for offering two different site styles for my visitors.

Thanks a lot for the suggestions and comments, this is indeed the best web dev hangout on the net, period.

First off, whenever I see a <div> or a <span> my ears perk up. They're the most over- & wrongly used markup by people trying to do "the right thing;" since they don't particularly affect the design, people think they don't mean anything (admittedly, they don't mean much, but they're still over used since more appropriate tags usually do exist or they're just there to achieve an effect). In my view, it's just as bad as misusing tables--it's the same motive, in fact.

So, applying this to Zeldman's site, we first have to establish what he was trying to say. I'll take on the logo banner first:

The first #newmenu is completely useless & redundant to it's child, and the second <div> should be marked up as a paragraph or headline since those're more accurate (or it could be included in the #secondarynav list right beneath it--probably the most preferable solution, actually).

On the actual effect, the title of the anchor is redundant to its content. Inside the anchor, the <span> is only there to accomplish the effect--it serves no actual structural purpose--and it's just imitating the behavior of at least two existing elements (quite knowingly too, or it's unlikely that he'd have used the same abbreviation: "alt"). On top of this, the "alt text" is the exact same text as on the image, which for the most part is just text without "special treatment"--easily done with CSS.

If it is really that important to not have protruding strokes on the Ms in "zeldman.com" (& I don't think it is, but that's just me) then that text should be an image (with the appropriate alt text) and the "eye" could either be on the same logo image or put in the background somewhere. There is absolutely no reason for the "Web design news ... ISSN #1534-0309." portion to not be plain text, however. As text, "zeldman.com" should probably be marked up as <em>, <strong> or a handful of the other phrase elements--even <span id="logo">.

Moving onto the ALA/Happy Cog/WThRemix buttons, they face the same problems as the masthead, but text wouldn't work there so there's no problem with using images. For both the masthead and the buttons, he uses CSS :hover to load an alternative image, but onmouseover/onmouseout are both legal in XHTML & probably just as appropriate. Or, he could stick with :hover and use PNGs with transparency; just change the background color instead of the entire image saving all of us a couple of d/ls.

OK, so that's just semantics, this technique also has practical implications, too. If someone has images turned off (like I did while surfing @ 12k last month ), the CSS is still downloaded, which means that neither the alt text nor the image that replaces it will show up. If someone has visited your site and then you add a button, it probably won't show up either (and neither will the alt text) since the browser can cache the CSS. And there are also the normal issues with using images beyond that, too.

The big problem with all that isn't that it not clever, but that it's too clever--trying to rewrite what already exists. I'd have preferred something more along the lines of: