title: 100vh not making image 100% of viewport
body: <p>I am attempting to use <code>100vh</code> to make a <code>background-image</code> always have a height per the size of the screen. What I am wanting to do is use the same image for each viewport and allow the <code>overflow: hidden</code> to make due of the access width. In essence, narrowing the image more vertically. However, my attempt is not working. The <code>background-image</code> is not adjusting to the 100vh. </p>
  
  <p>Does anyone see what I am doing wrong?</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>#home-cover1 {
   background-image: url("/images/home-cover1.jpg");
      background-repeat: no-repeat;
      background-size: 100%;
      height: 100vh;
      width: 100%;
   position: relative;
  }
  #home-cover1-wrap {
   background-color: rgba(0,0,0,0.3);
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="home-cover1"&gt;
    &lt;div id="home-cover1-wrap"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>