Дочерние элементы #slider и самого #slider позиционированы (относительны), что означает, что они принадлежат каждому к своему собственному стековому контексту, и z-index не будет иметь никакого эффекта.
A)
Вам нужно удалить свойство position. Но это может конфликтовать с вашими позиционированными изображениями, так что на самом деле это не вариант.
В)
Вам понадобится фон травы, чтобы он находился в том же контексте стека, что и #slider, что означает, что он должен быть в элементе, который также является прямым потомком #banner (родственного для #slider).
Пример:
#slider:after {
content: '';
height: 10px;
width: 1024px;
background: url(images/banner.png) no-repeat left bottom;
}