How to display text under background image?

Question

I'm making a site where I have three <li> all floated to the left and they each have a background of a certain image. I have text in each of the <li> and I want to move that text so that it is displayed under the background instead of on it. What would the css for this sort of layout be?

Below I have an example of what I would like the layout to be. Thanks for the help.

======   ======   ======
|          |    |          |    |         |
|          |    |          |    |         |
======   ======   ======
  text          text           text

I have no ASCII art skills but hopefully you get the idea.

Answer 1

Set the text in a span with a margin-top equal to the height of the background image. The span will need to be display: block for this to work. Or, better yet, just set padding-top equal to the height of the background image, with background-image-repeat: no-repeat.

See http://jsfiddle.net/77NdE/ for a working example.

Answer 2

I'm assuming that you're setting the height to a fixed size. If that is the case, you can set the padding-top to be the same as the height of the image, and as long as background-repeat is no-repeat, you should see your comment below.

Example: http://jsfiddle.net/qTB8E/