Html 背景图像在vuejs中不能完全扩展

有这样的问题，但没有一个有令人满意的解决办法

我试图将背景图像插入vuejs组件，但该图像不会扩展到整个页面，而是仅扩展到该组件。即使我有

背景尺寸：封面

。我错过了什么

请看“PI”上方的白色补丁

我正在设计一个登录页面，因此logincard.vue代码是

<template>
    <div class="body-of-login">
        <div class="container">
            <div class="card card-container">
            /* Some more code here */
            </div>
        </div>
    </div>
</template>

<style >
.body-of-login {
    /* height: 100%; */
    min-height: 100vh;
    padding: 0;
    margin: 0;
    background-image: url("../../assets/ocean.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/*这里有更多的代码*/
.登录正文{
/*身高：100%*/
最小高度：100vh；
填充：0；
保证金：0；
背景图片：url（“../../assets/ocean.jpg”）；
背景重复：无重复；
背景附件：固定；
背景尺寸：封面；
}

这也是我的App.vue的代码

<template>
    <div id="app">
        <Navbar title="Post-IT" />
        <router-view />
        <Footer />
    </div>
</template>

<script>
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
export default {
    name: "app",
    components: {
        Footer,
        Navbar,
    },
};
</script>

<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>

从“/components/Footer”导入页脚；
从“/components/Navbar”导入导航栏；
导出默认值{
名称：“应用程序”，
组成部分：{
页脚，
导航栏，
},
};
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
}
#导航{
填充：30px；
a{
字体大小：粗体；
颜色：#2c3e50；
&.路由器链路完全激活{
颜色：#42b983；
}
}
}

您必须将容器的位置设置为固定：

.body-of-login {
    position: fixed;
    top: 0;
    bottom:0;
    left:0;
    width: 100%;
    height: 100%;
}

---

或者你可能在标题h1的顶部留有空白？

背景位置：顶部中间从此组件中删除了边距顶部，背景扩展为完整：）谢谢，登录框也与背景一起连接到导航栏。在CSS中需要做什么更改才能将其向下移动？只有登录框。