CSS Help: text positioning over image

Say I have an image that is 1000x1000. On top of the image, I want to place, say, the letter "A". Here are the details:

• Bottom value is 160 (meaning, the bottommost part of the "A" is sitting 160px from the top of the image)
• Left value is also 160 (meaning, the leftmost part of the "A" is sitting 160px from the left of the image)

I need this positioning to be relative. Say the image is reduced to 50% its original size, then the bottom and left values should become 80 and 80. (By the way, I picked 160px as an example so conversion to em would be easy.)

The image probably needs to be in its own container as it needs to be positioned开发者_StackOverflow on the page, as well. But right now, I just need help with positioning letters on an image. Any guidance you can offer is appreciated.

---

As per my comment, just use a background image and some padding:

http://jsfiddle.net/Xzbcy/

Try this combined effort from me and Seb:

http://jsfiddle.net/Gg29e/4/

---

use a div with background image and text inside it. position the text.

i.e

<div id="imageHolder"><span class="imageText"> some text</span> </div>

#imageholder {
width: 1000px;
height: 1000px;
background: transparent url(path/to/your.img) 0 0 no-repeat;
position: relative;
}
.imageText {
position: absolute;
top: 160px;
left: 160px;
 } 

you can use percentages for top and left values when scaling. or fiddle with it here: http://jsfiddle.net/SebastianPataneMasuelli/Gg29e/1/

---

If the image is not a bg img, you can try something like this (I have not tested it though)

• Enclose the image in a div
• Make height and width of the div auto so it gets the height and width of the image
• Place your text in a span and give it a higher z-index than your image (say z-index 2 for the span and 1 for the image)
• You can then place your span relative to the div and it should appear on top of your image.