Проблема с фоновым изображением меню боковой панели CSS

Question

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

Пример: http://demo.ponjoh.com/Simpla-Admin/index.html

Используемая CSS (на примере сайта и шахты):

 #sidebar {
    background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
    color: #888888;
    font-size: 11px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 230px;
}

На моем сайте изображение отображается только в его реальных размерах (230x197) и не заполняет боковую панель.Чего мне не хватает?

Answer 1

Человек, который кодировал этот CSS, дважды реализовал фоновое изображение боковой панели.Один раз в теле и один раз внутри боковой панели.

body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
    /* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}

Вот что вам не хватает:

background: url("../images/bg-sidebar.gif") repeat-y top left;

Answer 2

Если фоновое изображение является повторяемым изображением ... измените no-repeat на repeat или вертикально repeat-y

Answer 3

Вы должны добавить bottom: 0;, а также position: relative; к #body-wrapper и активировать background-repeat. Но будьте осторожны! Это очень грязный метод кодирования CSS, который, вероятно, приведет к недоразумениям и сбоям - все же он работает.

#body-wrapper {
    /* Your code stuff ... */

    position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
    width: 230px;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
    color: #888888;
    font-size: 11px;
}