background image of a span tag

[gerkintrigg]

Okay, so I want a background image to the span tag in a similar way to this test: http://www.amazingphrasing.com/test3.php but if you take the code:

<div class="faded_highlight_red">this is a span example.</div>

and replace the div tags with span tags like this:

<span class="faded_highlight_red">this is a span example.</span>

Suddenly the background image vanishes. It needs to be span rather than div, so any suggestions of how to get around the issue?

 

[XeNoMoRpH1030]

Any reason it has to be <span>? Somehow I feel like because it's an inline element, you can't do that.

[gerkintrigg]

i want to highlight a specific word like this:

i want to <span>highlight</span> a specific word like this:

 

I can do it with a colour, but i'd really like a background image too.

[haku]

Apply:

 

display:block;

 

to the span.

[gerkintrigg]

I like the concept, haku, but using this code give a line break before and after the span tag. I want it to act just like a highlighter pen (in fact, the background image will eventually look very similar to a highlighter pen.)

<link href="faded_styles.css" rel="stylesheet" type="text/css" />
i want to <span class="faded_highlight_red" style="display:block;">highlight</span> a specific word like this

 

[haku]

You could use

 

display:inline-block;

 

But I think it may not be cross-browser compatible. I may be wrong though. Worth a try.

[gerkintrigg]

that works on IE, Safari and Chrome. Thanks for that!