title: Background image made of SVGs overflowing past footer
body: <p>I'm having an issue with setting my background one one of my pages, it is comprised of a number of positioned SVGs and the height of the page isn't constant. There are sections that expand down as you complete the form, and the background continues down this page. This is causing me a small headache because as we continue down the page, if the whole form isn't expanded the overflow continues down past the footer, which leaves the page looking broken.</p>
  
  <p>The css looks like this: </p>
  
  <pre><code>body {
      background: #fcfcfc;
      overflow-x: hidden;
  }
  
  svg,
  .background {
      position: absolute;
  }
  
  .background {
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  </code></pre>
  
  <p>While the markup is structured like so,</p>
  
  <pre><code>&lt;div x-ng-controller="" class="container"&gt;
      &lt;div class="background"&gt;...contains absolutely positioned svgs&lt;/div&gt;
      &lt;div class="content"&gt;...content that sits ontop of background image&lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;Loaded separately in java app&lt;/footer&gt;
  
  </code></pre>
  
  <p>The absolute positioning seems to be catching me out and I can't contain the svgs past the end of the controller so it pushes below the footer. Any help is greatly appreciated.</p>