html - 如何制作具有重复左右图像边框的背景？

Question

这可能是一个非常普遍的问题。但是，我尝试使用网络上的每个答案，但由于某种奇怪的原因，我的样式表中似乎存在冲突。我有一个带有在全部内容上重复的图像（布）图案的背景。现在我正在尝试向#container2 添加一个左右边框图像（带有线程，使其看起来像一块逼真的布料），该图像垂直向下重复。但是每次我这样做时，整个容器都会向下移动，当我调整位置时，它就会消失。

我的代码如下：

<div id="container">
<div id="container2">
<div id="header">

....................content...............

</div>
</div>
</div>

CSS：

#container { background: #323232 url(images/container-bg.png) repeat; position: relative; }
#container2 { background:  url(images/container-bg-right.png) repeat; min-height: 300px; padding: 0px 0 0px 3%; max-width: 1000px; margin: 0 5% 0 5%; }
#header { margin-bottom:50px; }

先感谢您。

Answer 1

您可以为背景设置多个图像，警告这不是所有浏览器都支持的

所以你的html可能是：

<div id="container">
  <div id="inset-borders">
    -- Content --
  </div>
</div>

CSS：

#inset-borders {
  background-image:url('left-border.png') left repeat-y, url('right-border.png') right repeat-y;
}

Answer 2

你不想：

<div id="container"> </div>
<div id="container2"> </div>
<divid="header"> </div>

或者你想要“container2”里面的“container”