title: css image/content over 2 <div> and vertically centered
body: <p>I need to split the background of an html page in 2 (horizontally). The top and bottom part will have a different background image/texture, that will be repeated, in other words expandable with the window's size.
  On top of this "split background", I want to display some content, like texts or images.</p>
  
  <p>This code generates a "split background" like I want, but I can't/don't know how to put content on top of that...</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  html{height: 100%;}
  body { width: 100%; height: 100%; }
  .top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
  .bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="top"&gt;&lt;/div&gt;
  &lt;div class="bottom"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The content should be centered vertically and horiontally on top of this "split background". I tried to use a third div, play with z-indexes and use the css3 multiple bg feature, but I couldn't get the result wanted.
  Any suggestions?</p>