Making hero image responsive

Question

I am trying to make the hero image responsive on my main page, for desktop and mobile. Right now, it is stuck on the second section of the page (below it), I tried different possibilities to reposition it, I was not able to center it on the masterhead... Any tips would be greatly appreciated, I don't know what to do or what I'm doing wrong :-/

Here's the HTML:

<!-- Masthead -->
  <header class="masthead bg-primary image-center">
    <div class="container d-flex align-items-center flex-column">

    <!--Background Particles-->
      <div id="particles-js"></div>

      <!--Hero Image-->
      <img class="masthead-logo mb-5" src="https://pandassi.github.io/website.github.io/hero.png" alt="Lila Ait">

</div>

  </header>

And for CSS:

.bg-primary {
  background: radial-gradient(#49a7b7, #293f50) !important;
  height: 35em;
}

Then:

/*Just for info, I am using a Boostrap framework, not sure the purpose of mb-5 but I didn't want to mess with it*/

.mb-5,
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem 

And a little further:

#particles-js {
  width: 80rem;
  height: 35em;
  margin-top: -12.5rem !important;
}

.masthead {
  padding-top: calc(6rem + 74px);
  padding-bottom: 6rem;
}

.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.masthead .masthead-subheading {
  font-size: 1.25rem;
}

.masthead .masthead-logo {
  width: 25rem;
}

.masthead-logo {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}


@media (min-width: 992px) {
  .masthead {
    padding-top: calc(6rem + 104px);
    padding-bottom: 6rem;
  }
  .masthead .masthead-heading {
    font-size: 4rem;
    line-height: 3.5rem;
  }
  .masthead .masthead-subheading {
    font-size: 1.5rem;
  }
  .masterhead-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  }
}

Answer 1

In Bootstrap to make image responsive there is a class. Its class=img-fluid and to position your image to the centre of the page you can apply this to the image

img{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}