cssvue.jsvuetify.js

Vuetify - Set background img


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

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