CODEWITHSUNDEEP
vuetify.js
Sam
Sam

Reputation: 69

Vuetify not showing body background image

Vuetify hides the body's background image. Below, if you remove the include of vueitfy.js, the image will show.

<html>
<head>
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
  <style>
    body {
      background-image: url('https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?auto=compress&cs=tinysrgb&dpr=2');
      background-size: cover;
    }
  </style>
</head>
<body>
  <v-app id="app">
  </v-app>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
  <script>
    var app = new Vue({
        el: '#app',
    })
  </script>
</body>
</html>

Upvotes: 2

Views: 7353

Answers (1)

Ultradoxx
Ultradoxx

Reputation: 738

<v-app
    style="
    background: rgba(0,0,0,0);"
  ></v-app>

The v-app component is the wrapper that ensures the application works properly. It has certain base styling, such as a background. This is why you can't see for example a background image if you set one. By setting the v-app background to fully transparent [e.g. rgba(0,0,0,0)], your custom background like a background image become visible.

Upvotes: 2

Related Questions