Фоновое изображение в элементе списка

Question

Думайте, что это просто.

Я работаю над сайтом. Дизайн здесь

Я столкнулся с небольшим затруднением относительно того, как сделать стратегию нижнего колонтитула | управление | восстановление.

Поскольку с каждым элементом связано фоновое изображение, как мне разместить фоновое изображение так, чтобы оно находилось в самом низу элемента списка. Я пробовал background: bottom center;

Но, похоже, это отталкивает.

Любая помощь по этому вопросу приветствуется.

Answer 1

Я бы, наверное, сделал что-то вроде этого:

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

Answer 2

Как то так? Я использовал какое-то случайное изображение, которое я нашел в виде красного квадрата, таким же легко может быть и ваше изображение.

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