How to display text under the background image?

Question

I create a site where I have three <li> , all floating to the left, and each of them has the background of a specific image. I have text in each of the <li> , and I want to move this text so that it appears under the background, and not on it. What will be the css for such a layout?

The following is an example of what the layout should be. Thanks for the help.

====== ====== ======

| | | | | |
| | | | | |
====== ====== ======

text text text

I don't have ASCII skills, but hopefully you get this idea.

Answer 1

Set the text in the range with margin-top equal to the height of the background image. For this there must be a display: block for this. Or better yet, just set padding-top to the height of the background image using background-image-repeat: no-repeat .

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

Answer 2

I assume that you set the height to a fixed size. If so, you can set padding-top in the same way as image height, and as long as background-repeat is no-repeat , you should see your comment below.

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

Answer 3

Increase the height of the div to accommodate both text and background. Set the background to no-repeat and give padding-top for the text.

Answer 4

You can specify a fixed height for your li elements. The height will be the "height of the background image used" + "the height required by the text that goes under it." Then apply a padding on top for the li element, which is equal to the height of the background image.

Suppose the background image is 14 pixels high and suggests that the text below it is 12 pixels. Then

 li { height: 26px; /* 14 + 12 */ background-image: url(path/to/image); background-position: top; background-repeat: no-repeat; /* you can even repeat x if required */ padding-top: 14px; } 

Answer 5

Try it with pseudo classes

 <ul> <li id="background"></li> <li>Text</li> <li id="background"></li> <li>Text</li> <li id="background"></li> <li>Text</li> </ul> 

CSS

 ul {} ul li:nth-child(even) {padding-top:20px} 

Thus, each li element (each even number) will be indented above 20px (change it to the height of the li-background or higher) Change “even” to “odd” to even out every odd number. Hope you can understand what I mean :)