Background image on its full size but 2nd half of a screen is still empty

Question

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:

enter image description here

Here is my html:

 <div class="hero-image">
<div>
<h1 class="text-center mb-5" >Prijava</h1>
</div>
 <form @submit.prevent="signin">
   <div class="kontejner">
    <div class="form-group">
      <label style="margin-left:1.3%" class="forma" for="korisnicko_ime">Korisnicko ime</label> <br>
      <input v-model="email" type="email" class="form-control" id="emailField" aria-describedby="emailHelp"  > 
    </div> <br>
    <div class="form-group">
      <label style="margin-left:-4%" class="forma" for="passwordField">Lozinka</label> <br>
      <input v-model="password" type="lozinka" class="form-control" id="passwordField" >
    </div> <br>
   </div>
      <button type="submit" class="btn mt-5">Prijava</button> </form> 
       <small id="emailHelp" class="form-text-text-muted">Niste registrirani?</small>
 </div>

Here is app.vue html code:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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...

.hero-image {
background-image: url("/assets/zrnca2.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;

I'd be very grateful for your help!

Answer 1

CSS3 have the have the values 'cover' or 'contain' of the property background-size, which can be the solution in your case.

'cover': Makes the background image cover the entire container, but will stretch or cut off the image if the image size doesn't match the container size.

'contain': Will make the background image fully visible

Like this:

background-size: cover;

or:

background-size: contain;

or both:

background-size: contain, cover;

It's difficult to say what will work best for you because I haven't seen your code in context, but I think 'contain' or a combination 'contain, cover' will be the best solution in your case.

Read more about 'contain' and 'cover' here: https://www.w3schools.com/cssref/css3_pr_background-size.asp