Is this a "valid" css image replacement technique?

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>

Answer 2

Tatu is right, though you don't seem to need indent. Just put the image you want as the src of img. Then you get text when images are off (and note that alt text can styled using CSS on img), and have the image displayed when they are being fetched.

The big thing about 'image replacement methods' is because people want the text out of the alt attribute when you are styling headings so they get search-indexed correctly. img on its own though will do the job without any CSS or additional markup.

Answer 3

Well I use this kind of technique in h1/h2 tags when clients want strange fonts. Heres how I do it http://flowdev.tumblr.com/post/1187111884/the-power-of-h1-and-h2-tags

Works in all browser as far as I know.