title: resize page and crop div - CSS or JS
body: <p>I've a problem with an HTML page. This page has 2 elements:</p>
  
  <ul>
  <li>1 <code>div</code> with <code>position: absolute</code> in the left part of the page that is a logo of the page</li>
  <li>1 <code>table</code> always at the center of the page.</li>
  </ul>
  
  <p>If I resize the page, the table is always at the center of the page, but I'd want that the div crops the background in this mode:</p>
  
  <p><img src="https://i.stack.imgur.com/flhER.gif" alt=""></p>
  
  <p>How can I do this trick?</p>
  
  <p>The css of the left div is :</p>
  
  <pre><code>position:absolute;
  z-index:2;
  width:40%;
  height : 100%;
  background-image : url('img.png');
  background-size : contain;
  background-repeat : no-repeat;
  background-position:fixed;
  resize: none;
  overflow: none;
  </code></pre>