title: Vueutify Navigation Drawer - Change Background Image
body: <p>Hi I am learning vuetify and I want to change the background of a navigation drawer that I imported from vuetify default layout template. </p>
  
  <p>The tamplate was found and imported on official vuetify docs.</p>
  
  <hr>
  
  <p>The problem is I am unable to change the background of the drawer and set it to image</p>
  
  <p>This is the Default layout with drawer</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app
      id="inspire"
      dark
    &gt;
      &lt;v-navigation-drawer
        v-model="drawer"
        fixed
        clipped
        app
      &gt;
        &lt;v-list dense&gt;
          &lt;v-list-tile v-for="item in items" :key="item.text" @click=""&gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon&gt;{{ item.icon }}&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-content&gt;
              &lt;v-list-tile-title&gt;
                {{ item.text }}
              &lt;/v-list-tile-title&gt;
            &lt;/v-list-tile-content&gt;
          &lt;/v-list-tile&gt;
          &lt;v-subheader class="mt-3 grey--text text--darken-1"&gt;SUBSCRIPTIONS&lt;/v-subheader&gt;
          &lt;v-list&gt;
            &lt;v-list-tile v-for="item in items2" :key="item.text" avatar @click=""&gt;
              &lt;v-list-tile-avatar&gt;
                &lt;img :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`" alt=""&gt;
              &lt;/v-list-tile-avatar&gt;
              &lt;v-list-tile-title v-text="item.text"&gt;&lt;/v-list-tile-title&gt;
            &lt;/v-list-tile&gt;
          &lt;/v-list&gt;
          &lt;v-list-tile class="mt-3" @click=""&gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon color="grey darken-1"&gt;add_circle_outline&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-title class="grey--text text--darken-1"&gt;Browse Channels&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile&gt;
          &lt;v-list-tile @click=""&gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon color="grey darken-1"&gt;settings&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-title class="grey--text text--darken-1"&gt;Manage Subscriptions&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile&gt;
        &lt;/v-list&gt;
      &lt;/v-navigation-drawer&gt;
      &lt;v-toolbar
        color="red"
        dense
        fixed
        clipped-left
        app
      &gt;
        &lt;v-toolbar-side-icon @click.stop="drawer = !drawer"&gt;&lt;/v-toolbar-side-icon&gt;
        &lt;v-icon class="mx-3"&gt;fab fa-youtube&lt;/v-icon&gt;
        &lt;v-toolbar-title class="mr-5 align-center"&gt;
          &lt;span class="title"&gt;Youtube&lt;/span&gt;
        &lt;/v-toolbar-title&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-layout row align-center style="max-width: 650px"&gt;
          &lt;v-text-field
            :append-icon-cb="() =&gt; {}"
            placeholder="Search..."
            single-line
            append-icon="search"
            color="white"
            hide-details
          &gt;&lt;/v-text-field&gt;
        &lt;/v-layout&gt;
      &lt;/v-toolbar&gt;
      &lt;v-content&gt;
        &lt;v-container fill-height&gt;
          &lt;v-layout justify-center align-center&gt;
            &lt;v-flex shrink&gt;
              &lt;v-tooltip right&gt;
                &lt;template v-slot:activator="{ on }"&gt;
                  &lt;v-btn :href="source" icon large target="_blank" v-on="on"&gt;
                    &lt;v-icon large&gt;code&lt;/v-icon&gt;
                  &lt;/v-btn&gt;
                &lt;/template&gt;
                &lt;span&gt;Source&lt;/span&gt;
              &lt;/v-tooltip&gt;
              &lt;v-tooltip right&gt;
                &lt;template v-slot:activator="{ on }"&gt;
                  &lt;v-btn icon large href="https://codepen.io/johnjleider/pen/YeRKwQ" target="_blank" v-on="on"&gt;
                    &lt;v-icon large&gt;mdi-codepen&lt;/v-icon&gt;
                  &lt;/v-btn&gt;
                &lt;/template&gt;
                &lt;span&gt;Codepen&lt;/span&gt;
              &lt;/v-tooltip&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-container&gt;
      &lt;/v-content&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data: () =&gt; ({
        drawer: null,
        items: [
          { icon: 'trending_up', text: 'Most Popular' },
          { icon: 'subscriptions', text: 'Subscriptions' },
          { icon: 'history', text: 'History' },
          { icon: 'featured_play_list', text: 'Playlists' },
          { icon: 'watch_later', text: 'Watch Later' }
        ],
        items2: [
          { picture: 28, text: 'Joseph' },
          { picture: 38, text: 'Apple' },
          { picture: 48, text: 'Xbox Ahoy' },
          { picture: 58, text: 'Nokia' },
          { picture: 78, text: 'MKBHD' }
        ]
      }),
      props: {
        source: String
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am expecting apply the background image to drawer, example : <a href="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg" rel="nofollow noreferrer">https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg</a></p>
  
  <p>I tried to use  in my drawer src atribute : </p>
  
  <pre><code>  &lt;v-navigation-drawer
        v-model="drawer"
        fixed
        clipped
        app
        src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
      &gt;
  </code></pre>
  
  <p>But that is not working, also I tried wrapping drawer in Div and accessing the class with scoped css but without any success.</p>
  
  <p>There is a backgrounds ready component for drawers at official vuetify codepen : <a href="https://codepen.io/pen/?&amp;editable=true&amp;editors=101" rel="nofollow noreferrer">https://codepen.io/pen/?&amp;editable=true&amp;editors=101</a>
  that shows using src atribute.
  But for some reason it is not working with this example.</p>