网站背景图片无法全屏覆盖存在间隙问题求助

问题根源 #

浏览器默认会给<html>和<body>元素设置内置的margin/padding（不同浏览器数值略有差异），这就是你看到的四边间隙的来源，和Flask框架无关。

修复步骤 #

1. 清除默认全局边距与内边距
   在CSS开头添加以下代码，重置html和body的默认样式：

   html, body {
     margin: 0;
     padding: 0;
   }
   

2. 统一盒模型（可选但推荐）
   避免元素的内边距、边框挤占宽高空间，设置全局盒模型：

   * {
     box-sizing: border-box;
   }
   

3. 优化.fixed-bg类样式
   移除原代码中不合理的负偏移，确保元素完全贴合视口：

   .fixed-bg {
     height: 100vh; /* 用视口高度确保占满屏幕，比100%更可靠 */
     width: 100%;
     left: 0; /* 移除-10px的临时偏移 */
     background-image: url("space.png");
     min-height: 500px;
     background-attachment: fixed;
     background-position: center; /* 合并x/y轴定位，写法更简洁 */
     background-repeat: no-repeat;
     background-size: cover;
     margin: 0;
     padding: 0;
     top: 0;
   }
   

说明 #

因为你是把.fixed-bg应用在<body>上，不需要额外设置position: fixed——body本身作为根块级元素，清除默认边距后就能自然占满视口宽度，再配合height: 100vh就能实现全屏无间隙的背景效果。

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