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

Question

This is probably a very common question. However I have tried to use every answer on the web, but for some strange reason there seems to be a clash in my stylesheet. I have a background with an image (cloth) pattern that repeats over the full content. Now I am trying to add one left and right border image (with threads, to make it look like a realistic cloth) to #container2, that repeats vertically down. But every time I do this, the whole container moves down, and when I adjust the position, it disappears.

The code I have is as following:

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

Thank you in advance.

Answer 1

You can set multiple images for your backgrounds warning this isn't support by all browsers just yet

So your html could be:

<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

Wouldn't you want:

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

Or do you want "container2" inside of "container"