divの上と下の両方に背景を表示していますか？ #multiple background-position

Question

この小さな灰色の矩形（赤い円）は、サムネイルを共有するdivの上端nの下に表示する必要があります（このdivも同様に2または3行のサムネイルを作成できます）

画像：

ここでは、それがATMをどのように見えるかのために私のコードです：

.jq_thumbnails { 
    background: url("/site_media/static/coffee_small_top.png") top left no-repeat; 
    overflow: auto; 
    height: 100%; 
} 

は、それが簡単にこの効果を達成することは可能ですか？私はサムネイルリストの長さをチェックし、それに応じて特定の背景画像を使用するifequalタグを作成することを考えましたが、html/cssのみを使用してこれを実現することは可能でしょうか？

あなたが背景を repeat-yことができるようにあなたは、外側のdivや背景をカバー内側のものを作ることができます。もちろん、

Answer 1

あなたはCSS3 Multiple Background Imagesを活用することができます

に background-repeatプロパティを設定し

.jq_thumbnails { 
    background-image: url(../images/bg-top.png), url(../images/bg-bottom.png); 
    background-position: 0 0, 0 bottom; 
} 

あなたの特定のシナリオに合わせ：

background-repeat: repeat-x, repeat-x; 

これはsupported in現在のすべてのバージョンであります主要なブラウザ：

Answer 2

;）