2 footer'а и масштабирование ширины в Bootstrap 3

[TCAby]

Делаю первый раз верстку под bootstrap — решил осваивать фреймворк и все такое. Проблема — «плывет» при сужении экрана. Он высокий, 400px, фоном стоит картинка. При сужении экрана столбцы, которые не помещаются по ширине, уходят вниз, но картинка не «размножается» по вертикали (вариант repeat-y не срабатывает так, как надо). Далее, под футером стоит еще одна строка (div height:80px) более темная по фону (в ней копирайты). При сужении экрана она не уходит вниз под все выстроившиеся вертикально колонки footer, а остается «прилеплена» к нему снизу, таким образом частично закрывая столбцы футера.

Вот нормальный футер, который задуман:

 

А вот после сжатия экрана:

 

В варианте position: absolute; bottom: 0; блок просто залипал внизу страницы, "наезжая" на другие блоки, идущие до самого низа. Это уже пробовал.. и absolute, и fixed. 

 

Как вариант, видится мне в разных моделях девайсов делать разный CSS для footer.. но не знаю, как это сделать; и вопрос .bottomfooter тоже остается.

 

Вот HTML (bootstrap настроен на 24 колонки, не на дефолтовые 12):

        <footer>         <div class="container">             <div class="row">                    <section class="col-md-8 col-md-offset-1">                     <h3>Рассылка</h3>                       <!-- форма -->                    </section>                    <section class="col-md-6">                     <h3>Контакты</h3>                       <!-- контент -->                      </section>                    <section class="col-md-8">                     <h3>Форма обратной связи</h3>                       <!-- форма -->                    </section>           </div>            </div>        </footer>        <div class="clearfix"></div>        <div class="bottomfooter">         <section class="col-md-6">              <!-- контент -->            </section>            <section class="col-md-12 text-center">              <!-- контент -->            </section>            <section class="col-md-5 text-right">              <!-- контент -->            </section>            <section class="col-md-1">             <!-- колонка-"заглушка" -->            </section>        </div>

Вот CSS:

.bottomfooter {height: 80px;padding: 10px 0;background-color: rgb(80,80,80);color: @text-color;font-size: @font-size-base;a {color: @text-color;}}footer {background-image: url('../images/footer-2.png');background-repeat: no-repeat;   color: #dbdbdb;   font-size: @font-size-base;.container { height: 400px;padding: 10px 0;  background: @panel-footer-bg;