Html 如何拥有全屏背景？

我有一个Vue.js应用程序

<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>

.内容{
填充：0px；
边缘顶部：80px；
}

在我的主页内容中：

<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>

SPIR智能照片识别的Web应用
里索海豚

使用SPIR的此web应用程序（参见工具按钮），
使用计算机视觉技术和先进的统计策略，您可以在照片中自动识别Risso的海豚。


SPIR描述可在论文DolFin中获得：一个研究爱奥尼亚海北部Risso海豚的创新数字平台
（地中海中东部），科学报告，817185（2018年）

.家{
宽度：100%；
身高：100%；
左：0；
背景：url（“../assets/back4.jpg”）无重复中心顶部；
z指数：-1；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.bg-text1{
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.7）；
颜色：白色；
字体大小：粗体；
填充：20px；
}

这样，只有在有文本的地方才有背景图像，页面的另一面是白色的

---

我还尝试了div

home

的

position:fixed

，它可以正常工作，但是如果文本超过页面大小，我就无法向下滚动。

100%的宽度或高度意味着100%的容器（of.home）。因此只需使用视口尺寸vw和vh，因为它们独立于容器：

width: 100vw;
height: 100vh;

---

高度顺序：100%；要按照您的意愿工作，需要将它放置在所有父元素上，一直放置到html元素

这里有一个小提琴的例子：

我刚刚添加了这个，但是您可能有更多需要高度的父元素：100%

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

---

它可以工作，但是如果文本超过100vh，背景是白色的。我应该重复图像吗？你可以使用

minheight:100vh