Not able to see background through png in css

I have background gradient color that looks like this:

When adding an image with transparency (a PNG) on top of this background, instead of the background color showing through, it's showing a black background instead:

Here is my code:

<template>
  <IonPage>
    <ion-content :fullscreen="true" id="start" class="background">
      <div id="product_background">
        <Topbar />
        
        <div class="container">
          <ion-text color="" class="top-left">
            <h1>ARTICS PRO</h1>
          </ion-text>
          
          <ion-text color="" class="top-left2">
            <p>Steelseries</p>
          </ion-text>
          
          <ion-text color="" class="bottom-right">
            <p>ARTICS 7</p>
          </ion-text>
          
          <ion-text color="" class="bottom-right2">
            <p>Steelseries</p>
          </ion-text>
          
          <img :src="require('@/assets/headset_mockup.png')" style="height:105vw;width:100vw" />
        </div>
        
        <div slot="bottom" style="">
          <h1>Fixed Content</h1>
        </div>
      </div>
    </ion-content>
  </IonPage>
</template>

<script lang="ts">
import { IonContent, IonPage,IonText  } from '@ionic/vue';
import Topbar from '../Resources/Topbar.vue';
import { useRouter } from 'vue-router';

export default  {
  name: 'Index',
  components: {IonContent, IonPage, Topbar,IonText },
  setup() {

    return {
      router: useRouter(),
    }
  }
}
</script>
<style>
ion-content.background{

    --background: url('../../assets/product_background.png') 0 0/100% 92% no-repeat;

    }
 #product_background{
    background-attachment: fixed;
    background-size: cover;
    padding: 20px;
 }
.bottom-right {
  position: absolute;
  bottom: 14px;
  right: 16px;
}
.bottom-right2 {
  position: absolute;
  bottom: 0px;
  right: 16px;
}
.container {
  position: relative;
  text-align: center;
  color: white;
}
.top-left {
  position: absolute;
  top: 16px;
  left: 8px;
}
.top-left2 {
  position: absolute;
  top: 45px;
  left: 6px;
}
</style>

What could be the reason for this? Is there anything wrong with the image or the code?