use image as background for centered card with fill height

Question

I would like to have a container filling the height (screen height). In the center of that container I want to have a card with some text. The container itself should have a background image.

So the current code I'm using is

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-container fluid fill-height>
        <!--
        <v-img 
               src="https://images.pexels.com/photos/18104/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
               gradient="to top right, rgba(100,115,201,.5), rgba(25,32,72,.8)"
          >
          -->
          <v-layout align-center justify-center>
              <v-card flat color="transparent">
                <v-card-title class="justify-center white--text display-2 font-weight-medium">
                  Title goes here
                </v-card-title>
                <v-card-subtitle class="text-center white--text display-1">
                  Subtitle goes here
                </v-card-subtitle>
              </v-card>
          </v-layout>
        <!-- </v-img> -->
      </v-container>
      <h1>header below screen height</h1>
    </v-content>
  </v-app>
</div>

if you comment in the image the HTML will break and the card is not centered anymore. I created a Codepen for reproduction

https://codepen.io/trilliogus/pen/oNjbQMK?editors=1010

Would someone mind helping me achieving the desired layout?

Answer 1

PEN LINK

Description: If you have a div with position:relative then all the child div's with position:absolute will be stacked with top:0;left:0;

<div id="app">
  <v-app id="inspire" flex>
    <v-content>
      <v-container fluid class="ma-n1 pa-0">
        <v-row no-gutters>
          <v-col>
            <div style="height:100vh;
                        position: relative;
                        overflow:hidden;"
              >
               <div style="position:absolute;height:100vh;width:100vw;">
                <v-img 
                  src="https://picsum.photos/800/800"
                  height="100vh"
                  aspect-ratio="1.7"
                  cover
                ></v-img>
               </div>
               <div style="position:absolute;height:100vh;width:100vw;">
                <v-container fluid fill-height>
                  <v-row>
                    <v-col align="center">
                      <v-card flat color="transparent">
                        <v-card-title 
                            class="justify-center 
                                   white--text 
                                   display-2 font-weight-medium"
                        >
                        Title goes here
                        </v-card-title>
                        <v-card-subtitle
                            class="text-center 
                            white--text display-1">
                        Subtitle goes here
                        </v-card-subtitle>
                      </v-card>
                    <v-col>
                  </v-row>
                </v-container>
              </div>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>