Fit HTML background image between header and footer

Question

I am a beginner and designing a new HTML page with three sections header, content (Image) & footer and I have set the background image to be between header and footer. But when I run, some parts of the image is hidden under footer. Here's what I have done so far. Appreciate if someone could assist on this!

I have tried setting the height to 100% in CSS but still it doesn't change the display. Background image will change dynamically, so even if image changes it has to fit perfectly between header and footer.

.login,
.image {
  min-height: 100vh;
}

.bg-image {
  background: url('https://img.pngio.com/human-man-person-icon-png-and-vector-for-free-download-pngtree-human-icon-png-512_512.png');
  background-size: cover;
  background-position: center;
  /* Full height */
  background-repeat: no-repeat;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<header style="background-color:aqua">
  <div class="text-left text-white" style="width:300px;">
    Header TESTING&nbsp;&copy;Header
  </div>
</header>

<div class="container-fluid">
  <div class="container-fluid">
    <div class="row no-gutter">
      <div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
      <div class="col-md-8 col-lg-6">
        <div class="login d-flex align-items-center py-5">
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="navbar fixed-bottom navbar-toggleable-sm navbar-light footer border-top" style="background-color:aqua">
  <div class="text-left text-white" style="width:300px;">
    FOOTER TESTING&nbsp;&copy;Footer
  </div>
</footer>

Answer 1

Please follow the below link you'll get the idea.

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

If you need more clarity to go through below one.

enter link description here