title: Container with 3 backgrounds, absolute div 100% height of its parent
body: <p>Basically I want to make container with 3 semi-transparent image backgrounds, so I can put content over all of them. Concept is</p>
  
  <p>Background #1 static size</p>
  
  <p>Background #2 resizable size</p>
  
  <p>Background #3 static size</p>
  
  <p>And I want to be able to put content over all this 3 backgrounds to get <a href="http://img99.imageshack.us/img99/5365/backgroundsn.png" rel="nofollow">such an effect</a>.</p>
  
  <p>I was thinking about something like this:</p>
  
  <pre><code>&lt;div style="position: absolute; height: auto;"&gt;
      &lt;div style="background: url('images/container.png') repeat-y; height: 100%; width: 990px; position: absolute; top: 10px;"&gt;&lt;/div&gt;
      &lt;div style="background: url('images/containerTop.png') no-repeat; height: 10px; width: 990px; position: absolute;"&gt;&lt;/div&gt;
      &lt;div style="background: url('images/containerBottom.png') no-repeat; height: 11px; width: 990px; position: absolute; bottom: -21px;"&gt;&lt;/div&gt;
      text&lt;br /&gt;
      text&lt;br /&gt;
      text&lt;br /&gt;
      text&lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In effect, block are sized ok, but I don't have idea how to put text over 3 blocks, and make size still ok.</p>