将背景图像高度设置为视口高度

Question

In my Nuxt.js application using Vuetify.js , I want to set a background image for the whole content:

    <v-content>
      <v-img
        src="https://picsum.photos/id/11/500/300"
      >
        <v-container justify-center fill-height>
          <v-row justify="center" align="center">
            <v-col cols="12">
              <nuxt />
            </v-col>
          </v-row>
        </v-container>
      </v-img>
    </v-content>

The problem is that the content is not centered vertically because the image takes the full height of the window, thus I need to scroll down to see the content.

Is there a way to set the image's height to exactly that of the viewport's height in order to see my content centered vertically and the window does not net scroll down because of the image ?

If the content of the page is long, I should be able to scroll down and still see the image set as the background of the page

Minimalist demo code on Github in case you have time to run it.

Answer 1

Not really a vue-javascript solution but a CSS one. The following setup will result in a fullpage background image and the content being vertically aligned without a scrollbar.

EDIT: Use static asset

In your template:

<v-content 
  :style="`background-image: url(${require('../assets/image.jpg')})`" 
  class="fill-height bg-image">
  <v-container justify-center fill-height>
    <v-row justify="center" align="center">
      <v-col cols="12" justify="center" style="border: 1px solid;">
        <nuxt />
      </v-col>
    </v-row>
  </v-container>
</v-content>

And in your styles:

<style>
 .bg-image {
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   background-size: cover;
 }
</style>

Answer 2

Height:100vh maybe?

vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*

https://www.w3schools.com/cssref/css_units.asp