Other content get covered by background gradient

I'm trying to have a div with a moving background (you can find what I wrote so far here). The main issue is that the moving background is covering up the other content on the page.

<!-- App.vue -->
<v-app>
  <v-main>
    <MainContent /> // contains the moving background
    <div style="height: 80px" class="bg-primary w-100"></div> // footer that should be always visible
  </v-main>
</v-app>

This is what MainContent.vue looks like

<template>
  <div class="background-gradient"></div>
  <div class="h-screen">
    <v-container class="fill-height position-relative">
      <div style="height: 500px" class="bg-black w-100"></div>
    </v-container>
  </div>
<template>

<style>
.background-gradient {
  background-image: linear-gradient(136deg, #e5ccab 0%, #e5ccab 1.26%, #e0cbad 19.87%, #d4c8b5 39.24%, #bfc3c2 58.96%, #a2bdd5 78.81%, #8ab8e5 92.48%, #8ab8e5 93.59%);
  position: fixed;
  width: 162vw;
  height: 162vh;
  /* z-index: -1; */
  animation: moveBackground 6s ease-in-out infinite alternate;
}

@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-38%, -38%);
  }
}
</style>

This is the result

What am I doing wrong?

This is the cleanest solution I came up with

<template>
  <div class="h-screen position-relative overflow-hidden">
    <div class="underlay-gradient position-absolute"></div>
    <v-container class="fill-height position-relative">
      <v-card width="100%" height="500px"></v-card>
    </v-container>
  </div>
  <div>
    <!-- Long text here -->
  </div>
</template>

<style scoped>
  .underlay-gradient {
    width: 162vw;
    height: 162vh;
    background-image: linear-gradient(
      136deg,
      #e5ccab 0%,
      #e5ccab 1.26%,
      #e0cbad 19.87%,
      #d4c8b5 39.24%,
      #bfc3c2 58.96%,
      #a2bdd5 78.81%,
      #8ab8e5 92.48%,
      #8ab8e5 93.59%
    );
    animation: moveBackground 6s ease-in-out infinite alternate;
  }

  @keyframes moveBackground {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-38%, -38%);
    }
  }
</style>

Demo here