The reason for this issue is the v-app element overriding the background style.
You can try the following solution:
div[data-app='true'] {
background: url('/images/background.png') no-repeat center center fixed !important;
background-size: cover;
}
This CSS selector targets the root element of Vuetify (v-app) and enforces a change in the background style.
Alternatively, you can specify the name of your root element to customize the background style. For example:
#app {
background: url('/images/background.png') no-repeat center center fixed !important;
background-size: cover;
}
PS: Check out the demonstration below implementing this fix:
<template>
<div>
<v-app>
<v-content class="pa-4">
<v-data-table :headers="headers" :items="items" />
</v-content>
</v-app>
</div>
</template>
<script>
export default {
name: 'app',
data: () => ({
items: [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' },
],
headers: [
{ text: 'Id', value: 'id' },
{ text: 'Name', value: 'name' },
],
}),
};
</script>
<style>
#app {
background: url('https://ohlaladani.com.br/wp-content/uploads/wallpaper-OHLALADANI_DESKTOP_WALLPAPERS_AVENTURA-2.jpg')
no-repeat center center fixed !important;
background-size: cover;
}
</style>