HTML / JSP显示表的自定义重复背景图像

Question

我正在尝试使用此模板：

我使用表格来显示这些书籍，但我不知道如何将这个空的书架图像显示为背景：

我试过td和tr，但没有用;我也试过这个：

#main-table{
margin: 0 auto;
width : 1000px; 
background-image: url('images/EmptyWoodenShelf.png');
}

，结果如下：

那么有什么办法可以在大约100px之后重复背景吗？

更新： 当我为tr：

设置背景图像时，这是我的CSS

#main-table{
    margin: 0 auto;
    width : 1000px; 
}
#main-table tr{
    background-image: url('images/EmptyWoodenShelf.png');
    background-position: 0px 100px;
}
.tableitem{
    background-image: url('images/BookCover.png');
    background-position:center; 
    width:156px; 
    height:232px;
    margin: 50px 15px;
 }

Answer 1

您必须在货架图形中加入空白像素，以使图形的整个高度为100px。

虽然我建议您将背景图像添加到TR，然后将其放在底部。这样你就可以按原样使用你的图形。

Answer 2

检查此示例我使用了一个段落并根据需要提供图像边框

＆＃13;

＆＃13;

#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(http://i.stack.imgur.com/bZ8Lk.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image:url(http://i.stack.imgur.com/bZ8Lk.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(http://i.stack.imgur.com/bZ8Lk.png) 30 stretch;
}

＆＃13;

<p id="borderimg2">Here, the middle sections of the image are stretched to create the border.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该使用

background-position: 100px 0px;

第一个值是水平位置，第二个值是垂直位置。左上角为0 0.单位可以是像素（0px 0px）或任何其他CSS单位。如果只指定一个值，则另一个值为50％。你可以混合％和位置

详细了解here