Creating symbols inline that use images and text

I have a circle image that's fairly large in size to make it easy to resize it smaller or larger depending on where it goes. Its meant to be a background image to a character or two of text.

Basically, in a specific element, wherever the number 1 or 2 appears, I want the circle to appear behind the text, wherever the text happens to be in that element. Mixed in with the text are other images that can just be put in without an issue. I'm sizing them by ems to keep them where they need to go.

So for the sake of making this work as an example/question:

This is the image: http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png

So, basically, I need the text to work like this:

This is a paragraph (1) of the text.

Where (1) has the image sized down appropriately with the numeral 1 centered inside of it. the image can be 1.2 em to compensate the text, but I'll size that later. I'm doing this in javascript, but if anyone could help me figure out what开发者_如何转开发 the CSS style is going to be I can go with it from there.

Some additional things about the page is that the symbol/text hybrid has to sit within a table cell that's floating to the right of a div, that's relatively positioned, inside of another absolutely positioned div. Not sure if any of that will mess with the display settings, but that's what I'm looking at. Thanks.

---

You will want to include the (1) inside of a span that is set to display: inline-block;

This will give the span block element capabilities (set a background-image and width) while still flowing with the text. You can change the background image size by using the property background-size and setting it to the same width of the span.

Check out this JSFiddle.

---

I can only see this working with a mono-space font. Use your image for the background-image of the element containing the text. Get the index of the '1' in the string. Set the background-position to an em value of the index + 1. If there are multiple occurrences, you will have to layer additional absolutely positioned elements below the element containing the text.

---

As far as I know, you can't change the size of a background image using CSS. If your image didn't have to be resized dynamically, you could just wrap the number in a <span> with the appropriate background-image and other CSS rules set.

However, the following will work in the latest browsers that support CSS display: inline-block;:

<p>
    Lorem 
    <img 
      src="http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png" 
      style="width: 1em; height: 1em;" />
    <span 
      style="margin-left: -1em; 
             width: 1em; 
             display: inline-block; 
             text-align: center;">1</span>
    ipsum.
</p>

Personally, though, I'd create different sized images and use them as background-images for a span around a number. Something like:

<p class="big-text">
    Lorem <span class="number">1</span> ipsum
</p>
<p class="small-text">
    Lorem <span class="number">1</span> ipsum
</p>

... with CSS:

p.big-text span.number {
    background-image: url(/big-circle.png);
}

p.small-text span.number {
    background-image: url(/small-circle.png);
}

---

Since I cant edit my comment above, I thought of posting it as an answer:

Using css3, you could probably do it like this:

font-family:monospace;
font-size:2em;
padding:5px;
background: url(http://gumonshoe.net/NewCard/Frames/Mana/mana_circle.png) no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;

checkout the demo: http://jsfiddle.net/gWhqP/