如何在不填充内容的情况下向重复的CSS背景添加填充？

Question

有没有办法填充不会在内容中添加填充的重复背景图像？

我有一个使用浮动创建的3列布局，以及一个清除元素，以确保容器的高度正确。这是代码：

HTML

<div id="container">
    <div id="col1" class="col">col 1</div>
    <div id="col2" class="col">col 2</div>
    <div id="col3" class="col">col 3</div>
    <div class="clearFix"></div>
</div>

CSS

div#container {
    width:340px;
    border:1px solid #0f0;
    margin:30px;
    background:url(http://i.stack.imgur.com/PEE4K.png) 0 0 repeat-y;
}

div.col {
    float:left;
    width:100px;
    height:60px;
    margin:0px 10px;
    background-color:#f00;
}

div#col1 {
    margin-left:0;
}

div#col3 {
    margin-right:0;    
}

div.clearFix {
    clear:both;   
}

与我的重复图像一起使用时：

看起来像这样：

但我想调整重复图像的起点和点，以便显示填充，如下所示：

重要的是，当列缩放时，填充也会移动：

有没有人知道如何实现这一点，最好没有额外的标记，绝对没有JavaScript？

http://jsfiddle.net/shanethehat/a2EKM/

Answer 1

在div.col css定义中更改此内容：

div#container {
    margin:40px 30px;
}

div.col {
    margin:-10px 10px;
}

正如@BoltClock所说，如果你还需要绿色边框，这不起作用。如果你不需要边框，即使在ie6中这也应该可以正常工作。