Use text as background in css

This site is best viewed in a modern browser with JavaScript enabled.

rishabh

I am using a checkbox with opacity zero, now i can use " background: url('icons.png') " to set how the checkbox is displayed. But instead of the image i want a text to be displayed. I am doing this so that i can create an expandable tree view using only css. I want the check box to be set as '-' when clicked and '+' by default, but i have to do thid without using images. Is this possible? Thanks.

jedaisoul

If you use position:absolute you can overlay one div on another, using z-index:, then what is in the lower div will show through. However, bear in mind that opacity and z-index do not work with IE8 and below. So you will have a compatibility problem, however you achieve the result, if it depends on opacity settings.

There is an alternative, but I've not tested it. If you do not set a background color for a div it defaults to transparent even under IE7 and 8 (if I remember rightly). So using position:absolute, and ordering the code to draw the "background" div before the "foreground" one (which does not have a background set) should (I hope) allow you to use text in the "background" without relying on opacity or z-index. At least it may be worth a try...