Question

I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, Chrome, Safari, Moz)

HTML

<img id="my_image" alt="my text" src="images/small_transparent.gif" />

CSS

#my_image{
  background-image:url('images/my_image.png');
  width:100px;
  height:100px;}

Pro’s:

• image alt text is best-practice for accessibility/seo
• no extra HTML markup, and the css is pretty minimal too
• gets around the css on/images off issue where “text-indent” techniques hide text from low bandwidth users

The biggest disadvantage that I can think of is the css off/images on situation, because you’ll only send a transparent gif.

I’d like to know, who uses images without stylesheets? some kind of mobile phone or something?

I’m making some sites for clients in regional Australia (hundreds of km from the nearest city), where many users will be suffering from dial-up connections, and often outdated browsers too, so the “images off” issue is an important consideration.

are there any other side effects with this technique that I haven’t considered?

edit: Just wanted to add the extra info that I’d use this over a normal image tag because

A. I can use css-sprites

B. I can generate css with php that alternates background-image sources between different sub-domains using a single array

C. I like the way that resizing the image now doesn’t stretch or distort it so it behaves like everything else on the page.

Answer 1

What is wrong with normal image tags? img tags are meant to be used when your content has images in it, and CSS shouldn’t take any part in what the actual content is. On the other hand, presentational images should be set as background-images to divs and such and then handled via CSS so that they don’t interfere with the content and structural markup.

There’s no scenario where you’d need to do something like that.

If you want an image replacement technology that degrades gracefully when CSS is off, you can use the old faithful text-indent technique:

#element {
    width: 100px;
    height: 100px;
    background: image(pic.jpg);
    text-indent: -9999px;
}

<div id="element">This text will show if CSS is off, otherwise an image is displayed.</div>