How to display text under background image?

css, html, layout

Solution

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.

Problem

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.

Original source