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）で表示され、doesntのサイドバーを埋めます。私は何が欠けていますか？

Answer 1

guy CSSがサイドバーの背景イメージを2回実装したことをコードしているunisex代名詞。ボディーに一度、サイドバーの中に一回。ここで

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

あなたが#body-wrapperとbackground-repeatの活性化にbottom: 0;などposition: relative;を追加する必要があります。 しかし、注意してください！これは非常に汚い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

背景画像は、それがあったことを、再現画像... repeatに変更no-repeatまたは垂直repeat-y