Already checked exisitng questions for this, but didn't find an exact match.
My aim is to replace characters (like spaces) on a webpage with a small image using css.
Example:
<p><span>This is a text</span></p>
bees:
<p><span>ThisIMGisIMGaIMGtext</span></p>
(where IMG stands for a visible image (middot-pic for a space f.e.))
I cannot think of a suitable css selector. But myabe one of you guys (or girls) know a solution. Is this possible at all?
Already checked exisitng questions for this, but didn't find an exact match.
My aim is to replace characters (like spaces) on a webpage with a small image using css.
Example:
<p><span>This is a text</span></p>
bees:
<p><span>ThisIMGisIMGaIMGtext</span></p>
(where IMG stands for a visible image (middot-pic for a space f.e.))
I cannot think of a suitable css selector. But myabe one of you guys (or girls) know a solution. Is this possible at all?
Share Improve this question asked Jun 1, 2010 at 14:36 ThariamaThariama 50.8k13 gold badges145 silver badges175 bronze badges3 Answers
Reset to default 4Since you're not having an ID, I assume you want it on all <p><span>...</span></p>
. jQuery will help you:
$(document).ready(function(){
$("p span").html($("p span").html().replace(/ /g,'<img src="yourimg.gif" />'));
});
No, css doesn't have this ability. The only such things it can do are text-transform, which can do things like make it all uppercase.
If a monochromatic image will suffice, you could use a custom web font that has the glyph of your choice in place of the usual empty space character (U+0020).