bootstrap paragraph under image

Question

I have a div with background image (SVG). I'm trying to make Bootstrap behave as if that background did not exist and be responsive as it should be, with that being said I want to write stuff over that background as if it wasn't there.

What the expected outcome here is that "test" is written over the background, not under it.

What am I missing?

.firstsection {
  height: 70vh;
  background-image: url(https://via.placeholder.com/1200);
  background-size: cover;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="firstsection">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text">
        <p>test</p>
      </div>
    </div>
  </div>
</div>

<div class="secondsection">

</div>