Question

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.

Answer 1

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.