title: Background cover image on 100vh - screen differences
body: <p>So i try to set image on cover with 100vh - but i have very specific situation.</p>
  
  <p>On my image i have big plate and tablet that "lie down" on this plate.</p>
  
  <p>My goal is to make this image 100vh header but there is a problem - when i try test this on my big monitor it looks ok, but on monitor with smaller height it's look bad -i need this tablet to be 100% visible in all desktop devices.</p>
  
  <p>Check my fiddle with "Full page" option to see what i'm about.</p>
  
  <p>I also try to make this image cover without tablet, and then try to place another image with tablet and <code>position:absolute</code>, but my second image isn't always in exact same place to feet this plate insade frame.</p>
  
  <p>Is it possible to achieve what i desire ?</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>.cover {
    position: relative;
    height: calc(100vh - 80px);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    background-image: url(https://s4.postimg.org/uwxudv17x/cover.png);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="cover"&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>