How to add a gradient to an image in a v-navigation-drawer in Vuetify 3, Vue 3?

Question

I am using v-navigation-drawer in my Vue 3 app with Vuetify 3:

<template>
    <v-navigation-drawer app :image="backgroundImage">
        ...
    </v-navigation-drawer>
</template>
  
<script>
import backgroundImage from ' @/assets/backgroundImage.jpg'
export default {
    name: 'MyDrawer',
    setup() {
        return { backgroundImage }
    },
}
</script>

I would like to add a gradient to this image, similar to

<v-img
src="backgroundImage"
gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)"
></v-img>

How could I accomplish this?

Answer 1

//Adding id to navigation drawer 
<v-navigation-drawer 
    id="nav_drawer">
</v-navigation-drawer>

 // In the style tag, assign image and gradient for background
<style>
#nav_drawer{
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url('https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg');
    background-size: cover;
    color: white;
}
</style>