title: How can I make a background with a left and right image border that repeats?
body: <p>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.</p>
  
  <p>The code I have is as following:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="container2"&gt;
  &lt;div id="header"&gt;
  
  ....................content...............
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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; }
  </code></pre>
  
  <p>Thank you in advance.</p>