CODEWITHSUNDEEP
htmlcsslayout
PL3X
PL3X

Reputation: 482

How to display text under background image?

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.

Upvotes: 5

Views: 9823

Answers (5)

saluce
saluce

Reputation: 13350

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.

Upvotes: 4

Denny Mueller
Denny Mueller

Reputation: 3615

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}

So every second (every even number) li element will have a padding from the top with 20px (Change it to your li-background height or higher) Change "even" to "odd" to get every odd number aligned. Hope u can figur it out what i mean :)

Upvotes: 0

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

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/

Upvotes: 2

walmik
walmik

Reputation: 1452

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

Suppose the background image is 14px in height and lets assume that the text under it is 12px. 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;
}

Upvotes: 1

Akshat Goel
Akshat Goel

Reputation: 528

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

Upvotes: 0

Related Questions