Как задать фон 2мя картинками? - Как сделать...

Возможно где-то и обсуждалось, но я не нашел.

Вопрос касается фона в модулях.
Хотел сделать сверху плавный переход из черного в серый, основное тело серое - и снизу обратный переход в черный.
Что бы все это дело масштабировалось надо использовать 2 картинки.
в CSS верхнюю картинку и цвет фона задаю так:
.leftcol
{
   width:220px;
   background:#414141 url(../images/leftcol_bg.png) repeat-x 0% 0%;
   border-right: 1px solid #393939;

}

А теперь главный вопрос: куда и как добавить нижнюю картинку с параметрами:
background:#414141 url(../images/leftcol_b.png) repeat-x bottom; ???



PS На форуме уже были инструкции для получения закругленных углов - но к моей пробеме примнить этот способ не смог.

У меня там в модуль leftcol вставляется.
Если перед body вставлять то это  будет на всю страницу распространяться, чего мне не надо.

Как вставить именно в leftcol?

В html шаблона:
<td class="leftcol">
                  <div class="left">
                     <?php mosLoadModules('left',-2); ?></div>
<div align=bottom>
<img  src="/images/leftcol_b.png" align=bottom>
                  </div>
               </td>

не получается - leftcol_b зависает посередине и вниз не опускается + не понятно как растиражировать на ширину модуля?

воспользуйся советом iAlex и определи позицию модуля под всеми (z-index и position и margin тебе в помощь)

неужели средствами CSS реализовать невозможно?
Что-нибудь типа:
{
   width:220px;
   background-1:#414141 url(../images/leftcol_bg.png) repeat-x 0% 0%;
   background-2:url(../images/leftcol_b.png) repeat-x ищеещь;
   border-right: 1px solid #393939;

}

 

тебе и советуют посредством CSS это сделать
#div {background:url(../images/leftcol_bg.png) repeat-x ;
        height: px;/* сколько нужно  */
       position: relative;
}
#div2 {background:url(../images/rightcol_bg.png) repeat-x ;
        height: px; /* сколько осталось */
        position: relative;
        margin-top: 400px;
}
значения margin меняют знак на "-" в зависимости от того куда ты эти дивы буш вставлять.
и ничего страшного...

Там фишка в том что высота динамическая, и эти 2 половинки должны разъезжаться в зависимости от контента...

height: auto; или вообще бе оного тебе не подходит???
приведи наверное кусок шаблона или весь, так что и куда сказать будет трудно...

И так вот html:

<td class="leftcol">
                  <div class="left">
                     <?php mosLoadModules('left',-2); ?></div>
               </td>

тут в таблице грузится модуль left;

а вот класс для него leftcol:
.leftcol
{
   width:220px;
   background:#414141 url(../images/leftcol_bg.png) 0% 0% repeat-x;
}


Картинка передает leftcol_bg.png переход от черного к #414141, она висит сверху.

Надо такую же (перевернутую) зафигачить вниз, для обратного перехода фона в черный.

Возможно где-то и обсуждалось, но я не нашел.

Вопрос касается фона в модулях.

.leftcol
{
   width:220px;
   background:#414141 url(../images/leftcol_bg.png) repeat-x 0% 0%;
   border-right: 1px solid #393939;

}

Так где конкретно нужны картинки в колонке с модулямт (<td class="leftcol">....)
Или всё таки в каждом модуле в позиции left (<?php mosLoadModules('left',-2); ?>)

????

сделай стили, типа:

.leftcol {
   width:220px;
   background:#414141 url(../images/leftcol_bg.png) repeat-x top;
}
.leftcol .bt { 
   background: url(../images/нижний.png) repeat-x bottom;
}

потом в хтмле вызываешь его так:

<div class="leftcol"><div class="bt">

сюда всё остальное содержимое
и заканчиваешь:

</div></div>

Действитель, все работает. 
Большое спасибо iAlex !