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.
精彩评论