html - 如何通过修改 css 和 html 使图像重复

Question

我正在尝试重复与左右容器相关的图像 .middle-container-line。

基本上随着插入的图像越来越多，我希望 .middle-container-line 图像重复 y 轴(向下)并跟随插入的图像。

所以我不想使用 pixals 指定高度，因为我想上传图像以确定该行重复多长时间。

这可能吗？

这是我的代码:http://jsfiddle.net/F9R4P/

CSS:

.main-container {
    width:600px;
}
.image {
    height:100px;
    width:100px;
    background:black;
    color:white;
    margin:20px 0 0 20px;
}
.left-container {
    height:1000px;
    border:1px solid red;
    float:left;
    width:39%;
}
.middle-container-line {
    float:left;
    width:20%;
    height:100%;
    border:1px solid green;
    height:100%;
    min-height:200px;
    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y;
}
.right-container {
    border:1px solid blue;
    float:left;
    width:39%;
    height:100%;
}

Answer 1

您实际上可以像这样将整个代码组合在一起:

.bgclass{
    background:url(images/mybg.jpg) repeat;
}

对于 css 引用背景，您可以在这里快速查看: http://www.overpie.com/css/tutorials/css-background