CODEWITHSUNDEEP
htmlcsspositioning
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40633

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:

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 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.

Upvotes: 2

Views: 2152

Answers (3)

Gregg B
Gregg B

Reputation: 13727

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/

Upvotes: 1

Sebastian Patane Masuelli
Sebastian Patane Masuelli

Reputation: 4247

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/

Upvotes: 0

Luckner Jr. Jean-Baptiste
Luckner Jr. Jean-Baptiste

Reputation: 323

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.

Upvotes: 0

Related Questions