title: Tricky CSS situation with centered page and two separate backgrounds on the left and right
body: <p>The attached image is what we want to achieve with html / css. The main points are that the page is 960px centered, the left column takes almost 1/3 of that and the right takes almost 2/3. Both sections are separated by the dark gray line. That's simple to do.</p>
  
  <p>The problem is that on the left of the left section, we want the same background pattern as the one in the left section. And same for the right side. So on the right of the right section, we also want the light gray background pattern. Of course we don't know ahead of time how wide the browser will be open. </p>
  
  <p>I'm looking for a clean browser independent solution - not a hack that works in some cases and in some cases doesn't. Also, if it's any help we're using LessCSS (casic CSS3 solutions work too). </p>
  
  <p>Appreciate your input!</p>
  
  <p><img src="https://i.stack.imgur.com/IPcT7.jpg" alt="screenshot"></p>