title: background repeat with html,body height to 100% with css sticky footer
body: <h1>Problem</h1>
  <p>I'm using <a href="http://www.cssstickyfooter.com/" rel="nofollow noreferrer">this</a> implementation of a CSS sticky footer. It does:</p>
  <pre><code>html,body{
      height:100%;
  }
  </code></pre>
  <p>I use (would like to) use a repeating background, however, the <code>height:100%</code> causes this issue:
  <img src="https://i.stack.imgur.com/Xjz0f.png" alt="enter image description here" /> (image from <a href="https://stackoverflow.com/questions/8696911/background-cuts-off-when-html-and-body-height-are-set-to-100">another</a> sticky footer question with unsatisfactory answers)</p>
  <p>It's my understanding that the image gets sized to the size of the window at rendering, and thus never sizes past that.</p>
  <h1>Question</h1>
  <p>Is it possible to continue to use my existing choice of CSS sticky footer with a repeating background image rendered completely on long pages</p>
  <p>OR</p>
  <p>is there another option of CSS sticky footers which does support the repeating background?</p>
  <h3>For reference</h3>
  <pre><code>&lt;div id=&quot;wrap&quot;&gt;
      &lt;div id=&quot;header&quot;&gt;Header text&lt;/div&gt;
      &lt;div id=&quot;main&quot;&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=&quot;footer&quot;&gt;Footer Text&lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>* {margin:0;padding:0;} 
  html, body {height: 100%;}
  #wrap {min-height: 100%;}
  #main {overflow:auto;
      padding-bottom: 180px;}  /* must be same height as the footer */
  #footer {position: relative;
      margin-top: -180px; /* negative value of footer height */
      height: 180px;
      clear:both;} 
  </code></pre>