title: automatical resize of a backgorund image
body: <p>hello i have a problem with using my background graphics.</p>
  
  <p>the structure of the site is the following:</p>
  
  <p>header contains two colors with a fixed height of 100px.
  mainframe should contain a sliced image with a variable height.
  footer contains one color and has also a fixed height of 100px.</p>
  
  <p>so my sliced image has a height of 550px and will fit exactly between header and footer in case the content would not be larger.</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;div class="wrapper"&gt;
  
          &lt;div id="header"&gt;header&lt;/div&gt;
  
          &lt;div id="mainframe"&gt;INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX&lt;/div&gt;
  
          &lt;div class="push"&gt;&lt;/div&gt;&lt;!--Push for sticky footer--&gt;
  
  &lt;/div&gt;&lt;!--Wrapper --&gt;
  
      &lt;div class="footer"&gt;footer&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>  </p>
  
  <p><a href="http://jsfiddle.net/qUzjX/" rel="nofollow">example</a></p>
  
  <p>now the problem is, that my content will be larger than 550px and because of a fading colour there will be a hard edgde and you can see where the image ends. so i thought it would be nice when that sliced background image could automatically be resized.</p>
  
  <p>is there a way to realize that by using css?</p>
  
  <p>thanks alot.</p>