title: CSS: how to make background on left and right of the content
body: <p>I'm trying to create this layout. 
  <img src="https://i.stack.imgur.com/acueW.png" alt="Fluid image layout"></p>
  
  <p>I would like the layout to be accessible via IE 8 and up and other standard web browsers. So i don't want to use CSS3, if possible.</p>
  
  <p>So far i got this (it's without header and footer as those are primitive to add):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="right"&gt;
    &lt;div class="left"&gt;
      &lt;div class="container clearfix"&gt;
      This is an example text&lt;br /&gt;
      This is an example text&lt;br /&gt;
      This is an example text&lt;br /&gt;
      This is an example text&lt;br /&gt;
      This is an example text&lt;br /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.right {background: url('images/bgr.jpg') no-repeat scroll right top #FFFFFF;}
  .left {background: url('images/bgl.jpg') no-repeat scroll left top transparent;}
  .container {width: 960px; margin: 0 auto; position: relative; text-align: left; border: 1px solid red;}
  .clearfix:after {clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden;}
  </code></pre>
  
  <p>The problem is, when I open it at resolution lower than (pic1Width + pic2Width + contentWidth) the pictures will cover the content making it disapear. I'm also not able add a fluid space on the left and right of the Picture 1 and 2. </p>
  
  <p>Thanks for any hint!</p>