How to have full-screen background?

Question

I have a Vue.js app.

<template>
  <div id="app">
    <NavBar v-if="showNav"  />
    <b-container fluid class="content">
      <router-view />
    </b-container>
  </div>
</template>

<style scoped>
.content {
  padding: 0px;
  margin-top: 80px;
}
</style>

In the content I have this Homepage:

<template>
    <div class="home">
        <div class="bg-text1" id="block1">
          <b-container class="container2 ">
            <b-row style="margin-left: 10px">
              <h1><b-link
                href="https://www.nature.com/articles/s41598-018-35492-3"
                class="link"
                target="_blank"
                >Web Application of SPIR - Smart Photo Identification
                 of the Risso’s dolphin </b-link
              ></h1>
              <h5>
              <p>
                Using this web application of SPIR (see <b-button style="border-radius: 6px; padding-bottom: 0px; padding-top: 0px; border: 1px solid #FFFFFF" variant="danger">Tool</b-button> button), 
                you can automatically photo-identify Risso's dolphins in your photos, using computer vision techniques and advanced statistical strategies. 
              </p>
              <p>
              SPIR description is available in the paper DolFin: an innovative digital platform for studying Risso’s dolphins in the Northern Ionian Sea 
              (North-eastern Central Mediterranean), Scientific Reports, 8, 17185 (2018)
              </p>
              </h5>
            </b-row>
    </div>
</template>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  left: 0;
  background: url("../assets/back4.jpg") no-repeat center top; 
  z-index: -1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-text1 {
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0, 0.7);
  color: white;
  font-weight: bold;
  padding: 20px;
}
</style>

In this way, there is the background-image only where there is text, the other side of the page is white.

I also tried with position: fixed for the div home and it works, but in this way I can't scroll down if the text overtake the size of the page.

Answer 1

100% for width or height mean 100% of the container (of .home ). So just use the viewport dimensions vw and vh since they are independent of the container:

width: 100vw;
height: 100vh;

Answer 2

In order for height:100%; to work like you want it needs to be placed on all parent elements, all the way up to the html element.

Here's an example fiddle: https://jsfiddle.net/g6u3zwq2/15/

I just added this, but you might have more parent elements that need height:100%

html {
  height: 100%;
}
body {
  height:100%;
}