Vuetify - Set background img - css

Question

In Vuetify (Vue components super set) I want to add an image pattern in background.
I tried
body {
background: url("/images/background.png") no-repeat center center fixed;
background-size: cover;
}
But this doesn´t work, Some vuetify component cancels this style. I want an elegant way of doing this rather than inserting styles directly in the components or html.
Anybody faced this error? How do I fix it?

Answer 1

It's happen because the v-app replace the background style.
Try something like that:
div[data-app='true'] {
background: url('/images/background.png') no-repeat center center fixed !important;
background-size: cover;
}
The selector selected the element root of Vuetify (the v-app) and force to change the background style.
Or, you can use the name of your root element to change the background style. For example:
#app {
background: url('/images/background.png') no-repeat center center fixed !important;
background-size: cover;
}
PS: See the minimal example with this patch:
<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>

Answer 2

Put a class on your v-container
<template>
<v-container class="hero">
</v-container>
</template>
<style scoped>
.hero {
background: url('../assets/yourImage.jpg');
background-size: cover;
height: 100vh;
}
</style>