CSS Background Image Query

Question

Hi,

I basically have the following class:

.sf-sub-indicator {
  background:   url("/abcprod/images/arrows-ffffff.png") no-repeat -10px -100px;
}

Is it possible in CSS to set a background image clause to use a hardcoded symbol such as ">" so that instead it uses:

.sf-sub-indicator {
  background:   url(">") no-repeat -10px -100px;
}

Don't actually want it to use an image but a symbol instead.

Can this be done against a class such as above?

Thanks.

Answer 1

Short answer, no. You can only set a background to a color or an image.

Answer 2

I don't think it can be done via url(). inside the bracket should be "url" of image type.

You can do something similar using jquery

$(".sf-sub-indicator").each( function() { $(this).html(">" + $(this).html()) });

Answer 3

Long answer: Yes. Sort of.

Your most-popular tag is jQuery, so I won't go in depth with the code, but basically you could find the class:

var div = $(".sf-sub-indicator")

get its dimensions:

var height = div.height()` and `var width = div.width()

Then you could create an absolutely positioned div of that height and width, and place it directly over the original div. Then, making sure that the first div had no background-color, you could give that a higher z-index than the new div.

Lastly, fill the new div with .innerHtml with your character, and set overflow=hidden.

This is a weird request...