CSS: how to "plot" invisible text over an image?

Question

Say I have a webpage containing a 200x200 image. At coordinates 50,50,150,150 (x1, y1, x2, y2), say I have the letter "A".

How do I do the following in CSS:

1. Overlay the image with the character "A" starting at the coordinates x1, y1?
2. Size the text such that it fits x1, y1, x2, y2?
3. Make the text invisible (but still on "top" of the image so that it can be selected)?

Also, say that this image can be moved by the user (e.g. via drag and drop). How would I maintain the position of the overlaid text?

Answer 1

My first thought is that you set the image as a background to a span, div, or other container element (whatever is appropriate for the content and its purpose on your page), and then use padding to position the character within the container. Size the text by setting font-size on the container, and then use text-indent: -999999px to make the text hidden.

The position of the text would stay the same when the containing element is moved, because the position is relative to the container.