CSSの位置付けが機能しません

Question

私は過去2時間この問題で重症化しました。信じられない。

私は、ヘッダーの背景、中間の白い背景とボットの背景の3つのコンポーネントで単純な左の列を作成しています。いくつかの愚かな理由のために、中間の繰り返しの背景は、ヘッダーをオーバーラップし続けます。私が「バックグラウンドポジション」を使用すると、下に移動しません。

.leftcolumn .block{ 

background-color:#FFFFFF; 

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_center.png);[/url] 
background-position:0px 10px; 
background-repeat: repeat-y; 

width:205px; 
} 


.leftcolumn .block .wrap { 

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_header.png);[/url] 
background-repeat: no-repeat no-repeat; 
width:205px; 
padding-left:0px; 
padding-top:10px; 

} 


.leftcolumn .block .bot { 
background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_bot.png);[/url] 
background-repeat: no-repeat repeat; 
background-position: 0px 51px; 
} 

私のHTML：：

 <div class="block"> 

      <div class="wrap"> 

      <div class="navigation"> 
       <ul> 
       <li><a href="#" title="">Link 1</a></li> 
       <li><a href="#" title="">Link 2</a></li> 
       <li><a href="#" title="">Link 3</a></li> 

       </ul> 
      </div> 
      </div> 
      <span class="bot"> </span> 

     </div> 

Answer 1

background-positionは、それが画像を取得して開始し、それだけでどこ、実際の要素を移動wont't

は、ここに私のCSSコードです。スプライトイメージを使用する例があります。バックグラウンド位置を設定してオーバー状態にし、別の状態をホバー状態に設定します。実際の位置情報（例：top、bottom、left、right）を試してみるか、余白を使用して希望の位置に調整してみてください。 iamseriousのコメントに関しては、コンテンツとdisplay:block;をヘッダに追加することも役に立ちます。

Answer 2

これはあなたが探しているものですか？

http://jsfiddle.net/7TVkh/