设置CSS属性后HTML背景图仍无法铺满全屏，如何解决？

核心问题 #

你的代码存在几个关键问题导致背景无法铺满全屏：

1. CSS单位书写错误：数值与单位之间不能有空格（比如2 rem、100 %），浏览器会直接忽略这类无效声明；
2. 未清除默认边距：浏览器默认给<body>设置了margin，导致.slide元素无法真正贴合视口边缘；
3. 背景属性分散设置：内联样式和CSS的背景属性拆分设置，容易出现优先级或属性覆盖问题。

修复后的代码 #

CSS部分 #

/* 清除浏览器默认样式，避免边距干扰 */
body {
  margin: 0;
  padding: 0;
}

.slide {
  text-align: center;
  padding: 2rem; /* 修复单位空格问题 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 统一背景属性写法，避免分散设置冲突 */
  background: url(images/slide_1.png) no-repeat center / cover;
  min-height: 60rem; /* 修复单位空格问题 */
  width: 100%; /* 直接设置宽度，比min-width更稳妥 */
}

HTML部分（移除内联背景样式，统一管理） #

<div class="slide">
  <div class="content">
    <span>Explore, Discover, Travel</span>
    <h3>Travel around the world</h3>
    <a class="btn" href="">Discover more</a>
  </div>
</div>

额外说明 #

• 如果需要强制铺满视口宽度，可替换width:100%为width:100vw，但注意100vw会包含滚动条宽度，若出现横向滚动，给body加overflow-x:hidden即可解决；
• background简写形式整合了background-image、background-repeat、background-position、background-size，写法更简洁且不易出错。

内容的提问来源于stack exchange，提问作者沈靖禧