CSS背景图片无法在浏览器中完整显示的问题排查

问题根源 #

默认状态下，<html> 和 <body> 元素的高度仅由内部文本内容撑开，不会自动占满浏览器视口的全部高度，导致背景图片只能覆盖到文本结束的位置。

修复代码 #

修改你的CSS样式，给<html>和<body>强制设置100%高度，并清除默认边距：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-image: url("station.jpg");
    background-size: cover;
    background-attachment: fixed; /* 可选，滚动时背景保持固定 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    text-align: center;
}

关键说明 #

• html, body { height: 100% }：强制让这两个根元素高度铺满浏览器视口
• margin: 0; padding: 0：清除浏览器默认的内外边距，避免出现不必要的空白或滚动条
• background-attachment: fixed：可选配置，让背景图片在页面滚动时始终固定在视口内，保持全屏覆盖效果

内容的提问来源于stack exchange，提问作者Praise Njeri