title: Pure CSS parallax without fixed background height?
body: <p>I'm trying to get a pure CSS parallax effect working without having a fixed background height. This has been described in a <a href="http://keithclark.co.uk/articles/pure-css-parallax-websites/" rel="nofollow">few</a> <a href="https://css-tricks.com/tour-performant-responsive-css-site/" rel="nofollow">places</a>, but they have the common constraint that the background layer must have a fixed, known height.</p>
  
  <p>I would like to get the effect working without having a fixed, known height for the background due to some dynamic content.</p>
  
  <p>My minimal example is here: <a href="https://jsfiddle.net/yf8oyben/" rel="nofollow">https://jsfiddle.net/yf8oyben/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    perspective: 1px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .background {
    transform: translateZ(-1px) scale(2);
    width: 100%;
    background: lightgreen;
    height: 250px;  /* Assumes bg height */
    position: absolute;  /* Assumes bg height */
    top: calc(125px - 50vh);  /* Assumes bg height */
  }
  .foreground {
    background: rgba(0, 0, 255, 0.5);
    width: 100%;
    position: absolute;  /* Assumes bg height */
    top: 250px;  /* Assumes bg height */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id='container'&gt;
      &lt;div id="group1"&gt;
        &lt;div class="background"&gt;
          &lt;div style="height: 10rem"&gt;&lt;/div&gt;
          &lt;center&gt;Banner&lt;/center&gt;
          &lt;div style="height: 10rem"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="foreground"&gt;
          &lt;div style="height: 10rem"&gt;&lt;/div&gt;
          &lt;center&gt;Content&lt;/center&gt;
          &lt;div style="height: 100rem"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works now but assumes that the background is 250px, as annotated in the CSS. Is it possible to remove this and still retain the effect as it currently is?</p>