左と右の画像の境界線を繰り返す背景を作成するにはどうすればよいですか？

Question

これはおそらく非常によくある質問です。しかし、私はウェブ上のすべての答えを使用しようとしましたが、いくつかの奇妙な理由のために私のスタイルシートに衝突があるようです。 私は完全な内容にわたって繰り返すイメージ（布）パターンの背景を持っています。 ここでは、垂直方向に繰り返す＃container2に、左右の境界線の画像（スレッドを使用して現実的な布のように見える）を1つ追加しようとしています。しかし、私がこれをするたびに、コンテナ全体が下に移動し、私は位置を調整すると、それは消えます。

私が持っているコードは、次のとおりです。

<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; 
}