title: Cutting off top of image depending on background image container
body: <p>I have a container with a background image. This container is a variable height, depending on the content inside it. As the container gets smaller, I would like to progressively cut off the bottom of the background image, while still keeping it in the same place.</p>
  
  <p>I have played around with background-size and background-position but I haven’t been able to achieve this. Any advice?</p>
  
  <p>Basically I would like to do this: <a href="http://jsfiddle.net/tdgbu6kv/2/" rel="nofollow noreferrer">http://jsfiddle.net/tdgbu6kv/2/</a></p>
  
  <pre><code>.one {
    height: 500px;
  }
  
  .two {
    height: 100px;
  }
  
  .image {
    border: 1px solid red;
    background-position: right bottom;
    background-size: 50%;
    background-repeat: no-repeat;
    background-image: url(https://source.unsplash.com/random/800x600)
  }
  </code></pre>
  
  <p>but instead of it cutting off the top of the image, I would like it to cut off the bottom</p>