Vuetify - Set background img

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?

Solution 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>

Solution 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>

Comments

[El Hombre Sin Nombre]

I tried the two ways and no works. If i put a only colors works, but a image doesn´t.

[Gabriel Willemann]

Maybe you have a problem with your image. I create a minimal example, with this patch. Try to run in your computer, please.