Background Image with Vuetify

Question

Background Image with Vuetify

Navigation

#1 by (0 votes)

0

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

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

I did as follows: link

vue.js vuetify

asked by anonymous 23.04.2018 / 13:34

1 answer

System function to upload documents Keyboard does not overlay button in Relative Layout

score 0 · Accepted Answer

When instantiating v-app to the login area, this element receives a% cos of% white, which overrides the background that was placed in the previous element, ie it suffices to take the background of background referenced by id v-app and resize background ... recommend inspire property, follow 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><scriptsrc="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>