As I noted in a message this afternoon, it is possible to use CSS to embed and render images within non-HTML XML documents, such as TEI documents. The following example demonstrates one method, and works in Opera and Firefox: http://www.windspun.com/demoxml/embedimage.xml (The general method will work in IE6 provided IE6 recognizes the CSS selector -- but in this example IE6 doesn't understand selectors of form 'element[attr="attrvalue'"]' The technique is based on the Fahrner Image Replacement method (FIR): http://www.stopdesign.com/articles/replace_text/ The above link describes a couple other methods, but I haven't tested them out yet. Unfortunately, it appears there's no way in CSS 2.1, and probably not in CSS 3, to read the image file name in the document (as part of an attribute value), and use that to embed the image in CSS. (I.e., we'd like to be able to do url(attr()), but the CSS 2.1 spec does not support that, and CSS 3 probably won't either.) Thus, the CSS style sheet has to carry the specific image file names in it, which is not good (the image references could be put into a separate style sheet, and the demo CSS style sheet suggests how to do that.) I've appended the XML and CSS documents of this demo at the end of this message. There is another simpler technique using the CSS 'content' replacement property. But I could only get it to work in Opera, so I won't detail it here. On a distantly related topic, I previously discussed how one might use CSS to properly display the TEI inline <note> tag. It needs to be extracted from and displayed outside of the main flow of the document. It appears CSS3 is planning some cool stuff that may already work in Opera and Firefox (but haven't checked it out to see if indeed these browsers support the new properties.) See, for example: http://www.w3.org/TR/css3-content/#moving Enjoy! Jon (XML document: embedimage.xml) ********************************************************************** <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet href="embedimage.css" type="text/css"?> <embedimagetest> <picture image="pic1"> <text>This is the descriptor to image #1.</text> </picture> <picture image="pic2"> <text>This is the descriptor to image #2.</text> </picture> </embedimagetest> ********************************************************************** (CSS style sheet: embedimage.css) ********************************************************************** embedimagetest {display: block; padding-top: 100px;} picture {display: block; background-repeat: no-repeat; background-position: center; height: 350px;} picture[image="pic1"] {background-image: url("image1.jpg");} picture[image="pic2"] {background-image: url("image2.jpg");} text {display: none;} **********************************************************************