CSS background-image fun

Lots of talk today in regards to using CSS background-image to show an image for CSS-enabled browsers, and text for non-styled viewers. Zeldman posts about his own ideas for using background-image and its drawbacks, while Doug Bowman pulls together some great info on the subject.

One method that I think works well is using a background image while hiding an alternate, lo-fi version of that image as I do here on this site (ie, one that has no transparency so that it won’t look like trash in a non-styled view). If sufficient alt text is provided, then non-styled viewers would get one graphic with descriptive text that should satisfy browsers and devices that do not show images.

Hiding the image with display: none; may run into the same issues with screen readers skipping the image, but one might even overlap a lo-fi image without even having to hide it, provided the two images were equal size and non-transparent — similar to the pixy.cz method that Doug touched on earlier today.