This seems like it should be simple, but I haven't figured it out.
I've got a page which has a background image and several pieces of information that must be positioned at precise places relative to the image.
At present this is done by placing each piece of information in a <div> block with a different ID. Each ID is defined with "position: absolute" and appropriate "left" and "top" values.
This works well, except that the image needs to be centered, and when I do that the pieces of text don't move. Furthermore, no adjustment to the "left" and "top" values will work because the background image moves when the window is resized, and the text does not.
I want to put the text in a one-cell table, apply the background image to the cell, and set the text positions relative to the cell. Then the table can float anywhere it wants to, and all of the text should move with it.
But I can't figure out a way to make that happen. The description of the "position" property appears to say that it positions an element relative to the most local containing element that is positioned. That's self-defeating -- if I position a containing element (e.g., the table) I can't center it, and if I don't, I can't position the text. I've tried many combinations of "position" settings on the table and the text, without results.
Does anyone know the magic formula?