Question

Think its a simple one.

I am working on a site.
The design is here

I’ve hit a little snag as to how to do the footer strategy | management | recovery.

As each item has a background image associated with it, How do I position the background image so that it is at the very bottom of the list item. I’ve tried background: bottom center;

But it just seems to push it behind.

Any help on this appreciated.

Answer 1

Something like this? I’ve used some random image I found of a red square, this could just as easily be your image.

http://jsfiddle.net/chricholson/5NC7L/

http://jsfiddle.net/chricholson/5NC7L/1/

HTML:

<ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
</ul>

CSS:

li {
    padding: 0 0 50px 0;
    display: inline-block;
    background: url('http://www.martin.com/color/small/red305.1.gif') no-repeat bottom center;
}