网页登录窗口背景图上移且被截断无法正常显示怎么解决

问题原因 #

• 承载背景的.loginbody元素高度不足：默认块级元素高度由内部内容撑开，若登录表单内容高度远小于视口高度，元素高度不足就会导致背景被裁剪。
• 浏览器默认样式干扰：body默认自带8px左右的外边距，会挤压背景展示区域。
• 原有代码存在语法错误：font-family属性值多了无效的反引号，可能导致后续样式解析异常。

修复方案 #

替换原有CSS代码即可解决绝大多数场景下的背景截断问题：

/* 重置全局默认边距，消除浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.loginbody {
  background: url(img/LoginBackground3.jfif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
  /* 新增：设置最小高度为全屏视口高度，保证背景始终撑满可见区域 */
  min-height: 100vh;
}

额外排查项 #

如果修改后问题仍然存在，可以依次排查：

1. 确认.loginbody是页面最外层容器，没有父级元素设置了overflow: hidden或固定高度限制
2. 若页面存在滚动需求，可添加background-attachment: fixed固定背景位置，滚动时背景不会跟随偏移

内容的提问来源于stack exchange，提问作者Arthur Beluci