title: Calculate background-image ratio
body: <p>I have a background-image called <code>1</code> at the bottom of my page. I want to show another div with a background-image called <code>2</code> over the bottom 5% of background-image <code>1</code> (so, not the bottom 30% of the screen but bottom 30% of the image). </p>
  
  <p>However, I have a problem with making this responsive. I think I need to calculate the ratio somehow but I have no idea how. See below for the code I have. Whenever you resize the screen, the size of the background-image <code>1</code> changes and the position of the background-image <code>2</code> doesn't stay the same. How can I make it stick to one spot no matter what?</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/Jordy8/tmre6pku/5/" rel="nofollow noreferrer">here</a></p>