Background Image on a List Item

Think its a simple one.

I am work开发者_运维知识库ing 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.

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;
}

I'd probably do something like this:

a.strategy   { border-bottom: 44px solid #CC7A16;}
a.management { border-bottom: 44px solid #00718C;}
a.recovery   { border-bottom: 44px solid #954256;}