如何使用重複的左右圖像邊框製作背景？

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

難道你不想要的：

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

還是你想「container2的」，「容器」內

Answer 2

您可以爲背景設置多個圖像警告，這是不是所有支持瀏覽器只是還沒有

所以你的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; 
}