title: Background image on its full size but 2nd half of a screen is still empty
body: <p>I have a problem with my vue.js application, when I inspect the element it tells me that background image is on its max weight and max height, but here is what it looks like:</p>
  <p><a href="https://i.stack.imgur.com/0G9NN.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Here is my html:
  </p>
  <pre><code> &lt;div class=&quot;hero-image&quot;&gt;
  &lt;div&gt;
  &lt;h1 class=&quot;text-center mb-5&quot; &gt;Prijava&lt;/h1&gt;
  &lt;/div&gt;
   &lt;form @submit.prevent=&quot;signin&quot;&gt;
     &lt;div class=&quot;kontejner&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label style=&quot;margin-left:1.3%&quot; class=&quot;forma&quot; for=&quot;korisnicko_ime&quot;&gt;Korisnicko ime&lt;/label&gt; &lt;br&gt;
        &lt;input v-model=&quot;email&quot; type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;emailField&quot; aria-describedby=&quot;emailHelp&quot;  &gt; 
      &lt;/div&gt; &lt;br&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label style=&quot;margin-left:-4%&quot; class=&quot;forma&quot; for=&quot;passwordField&quot;&gt;Lozinka&lt;/label&gt; &lt;br&gt;
        &lt;input v-model=&quot;password&quot; type=&quot;lozinka&quot; class=&quot;form-control&quot; id=&quot;passwordField&quot; &gt;
      &lt;/div&gt; &lt;br&gt;
     &lt;/div&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn mt-5&quot;&gt;Prijava&lt;/button&gt; &lt;/form&gt; 
         &lt;small id=&quot;emailHelp&quot; class=&quot;form-text-text-muted&quot;&gt;Niste registrirani?&lt;/small&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here is app.vue html code:</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;router-view/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Here is my css code, but I tried everything including with changing my width and height and still nothing, it is still recognized as full screen but it is cut in half anyways...</p>
  <pre><code>.hero-image {
  background-image: url(&quot;/assets/zrnca2.jpg&quot;);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  </code></pre>
  <p>I'd be very grateful for your help!</p>