CODEWITHSUNDEEP
cssvue.jsvuetify.js
El Hombre Sin Nombre
El Hombre Sin Nombre

Reputation: 3112

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?

Upvotes: 4

Views: 25430

Answers (2)

Allan Drozd
Allan Drozd

Reputation: 99

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>

Upvotes: 8

Gabriel Willemann
Gabriel Willemann

Reputation: 1921

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>

Upvotes: 4

Related Questions