Put background image over text?

Question

This is not the apparently-common question about how to put text over a background image.

I have a background image that I want to work as an overlay -- it should be over the text. For simplicity sake, placing another div over the existing div and giving that the background image is much more difficult.

Is it possible for a background image to be above the text?

Answer 1

Well, I don't think if it's possible. For complicated designs, complicated approaches should be used. It's not possible to make MSN's first page in just one div. Anyways, as a workaround you can set color property of that div to transparent, it makes the text invisible but it's there in front of the background.

Answer 2

How about something like

<div class="container" style="position:relative;width:100px;height:100px;"> 
<p>Test to hide</p>
<div class="overlay" style="position:absolute;z-index:999;background:url(yourimage.jpg); width:100px;height:100px;"></div>
</div>

Answer 3

This is definitely not possible, and rightfully so. It would be wrong (and confusing) if you could use the background property of an element for anything other than the background.

The right way to do this is with an absolutely positioned div (with width and height set to 100%) within the container, alongside the text: http://jsfiddle.net/EvqNb/