title: Multiple backgrounds on top of each other (Normal, Stretched, Normal)
body: <p>Since I <a href="https://stackoverflow.com/questions/27659851/table-too-long-for-background-image-at-different-resolutions">faced an issue</a> with the background image beeing too short for the content at different resolutions, I tried to split the background into 3 parts and stretching the middle one automatically to fill the space between the top and bottom image accordingly. Unfortunately I didn't manage to realize this in CSS. How to do this exactly?</p>
  
  <p>content_background_top.png: 1024 x 68px
  <br>content_background_middle.png: 1024 x 6px (Stretched)
  <br>content_background_bottom.png: 1024 x 71px</p>
  
  <p>Something like this:</p>
  
  <pre><code>#content{
      width: 1024px;
      height: 950px;
      text-align: center;
      padding: 35px 0 35px 0;
      background: url(img/content_background_top.png), url(img/content_background_middle.png), url(img/content_background_bottom.png);
      background-repeat: no-repeat;
      background-size: 1024px 68px, 1024px auto, 1024px 71px;
  }
  </code></pre>