Меню боковой панели меню 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

Вы бы добавить 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; 
} 

Answer 3

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