在div的頂部和底部顯示背景？ ＃多個背景位置

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來實現此目的？

Answer 1

您可以利用CSS3 Multiple Background Images：

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

設置background-repeat屬性適合您的特定場景：

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

這是supported in所有當前版本主要瀏覽器：

Answer 2

當然你也可以做一個外層div和內部一個覆蓋的背景下，這樣你就可以repeat-y背景;）