title: Full background image initially fixed, then scrolls when DIV content ends
body: <p>I'm trying to figure out how to have a full background image (background-size: cover) be fixed initially (the text over the image scrolls while the image stays put), but, at the moment when the user scrolls down to the end of the content (like a tall block of text), the background then scrolls up revealing a new section/div below.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;section id="top-section-with-fixed-bg"&gt;
     &lt;div class="tall-content-1500px"&gt;
        &lt;p&gt;Text that's really tall&lt;/p&gt;
     &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="next-section"&gt;
     ...
  &lt;/section&gt;
  </code></pre>
  
  <p>But, again, the background image is fixed until the user has scrolled down 1500px and the content for that section/div is done. At that point, the user continues to scroll and the background image scrolls up. </p>
  
  <p>Not, as with parallax solutions, with the background image being covered by the next section. But the background image going up with the scroll.</p>
  
  <p>I'm thinking this takes some javascript, jQuery fixing, but I'm still a bit novice with it. I'm a designer just wanting a site to look and act this certain way. I'm guessing I have to recognize the height of the content, where that ends, and then either tell the CSS to switch from fixed to scroll (without effecting the position of the image), or having the js move the image up with the scroll action.</p>
  
  <p>Update: Here's a quickly tossed together <a href="https://jsfiddle.net/x1a9mykL/embedded/result/" rel="nofollow">jsfiddle</a></p>
  
  <p>UPDATED UPDATE:
  I think I've found the solution!</p>
  
  <p>With the pointers provided in responses here, then some digging around, I have it kind of working.</p>
  
  <p>I started with trying to figure out how to detect the window height. I plug that into the text/content DIV, using that value for the DIVs height. This is important, to set the container for the text to the height of the user's window, not to a specific height. Then, I set that DIV to overflow: auto (and hide the scrollbar, for aesthetics). That allowed me to set a trigger so when the end of the content in that DIV is reached, the background-attachment is changed from fixed to scroll.</p>
  
  <p>And, voila! It's not perfect, and I'm sure some real javascript/jQuery experts will right my wrongs on it, but I like how far I've gotten with this so far.</p>
  
  <p>I realize that the swtich from fixed to scroll is probably unnecessary. At the moment, when the switch happens, the image jumps a little to adjust to the window size and its own position, now being set to scroll. If I set the CSS originally to fixed, and make sure the content of the DIV (using padding wisely) to cover the window, as the user scrolls with the mouse the correct action will occur: text scrolls until there is no more text, then the image scrolls up.</p>
  
  <p>Check it out and look forward to help and comments.</p>
  
  <p><a href="https://jsfiddle.net/x1a9mykL/5/embedded/result/" rel="nofollow">jsfiddle</a></p>