Background Image with Vuetify

Question

How do I put a "background-image" in vuetify applications?

I tried to insert through css but the upload is not obeyed.

I did it this way: https://codepen.io/anon/pen/xjZEdB

Answer 1

To instantiate the v-appfor the login area, this element receives a background white, which superimposes the background which was placed in the previous element, that is to take the background of the v-app referenced by id inspire and resize the background... recommend the property cover, following example...

new Vue({
  el: '#app',
  data: () => ({
    drawer: null
  }),

  props: {
    source: String
  }
})

.back {
  background-image: url(https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
  background-size: cover;
}
#inspire {
  background: none;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app"  class="back">
  <v-app id="inspire">
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-12">
              <v-toolbar dark color="primary">
                <v-toolbar-title>Efetue seu login</v-toolbar-title>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field name="login" label="Login" type="text"></v-text-field>
                  <v-text-field name="password" label="Password" id="password" type="password"></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary">Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>