背景不起作用，它上升并被切成两半

Question

我正在创建一个网站登录窗口，背景是一张图片，但图片总是被切成两半并上升。

这是我正在使用的代码：

.loginbody {
    background: url(img/LoginBackground3.jfif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: sans-ser``if;   
}

this is what it lookslike

Answer 1

如果没有看到您的 HTML 也很难判断，但您的包含元素可能不是视口的完整高度。

如果您想制作一个始终填满视口的全屏背景图片，请将您的 CSS 应用于页面的 html 元素：

html { 
  background: url(img/LoginBackground3.jfif) no-repeat center center fixed; 
  background-size: cover;
}

或者，您可以将 loginbody 元素的视口高度设置为 100vh，使其成为视口的完整高度：

.loginbody {
    background: url(img/LoginBackground3.jfif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
    height:100vh;   
}

背景不起作用，它上升并被切成两半

Background doesn't work, it goes up and get cut in half

html

css

background

background-image