使用HTML/CSS Bootstrap设置背景图无法铺满body，存在空白问题求助

问题根源 #

你遇到的空白是因为html和body默认带有margin/padding，而且你的背景div没有设置足够的高度，无法撑满整个视口高度。

具体解决方案 #

方案1：修复html、body和背景div的样式

首先重置全局默认边距，确保容器能占满视口：

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

然后修改你的背景div，添加高度和宽度设置：

<div style="width: 100%; height: 100%; background-image: url('../assets/img/food-with-ingredients.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center;">
</div>

方案2：直接把背景样式应用到body（更简洁）

不需要额外的div，直接给body设置样式，一步到位：

<body style="margin: 0; padding: 0; background-image: url('../assets/img/food-with-ingredients.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; min-height: 100vh;">

关键说明 #

• min-height: 100vh 相比 height:100% 更适配内容超过视口的情况，确保背景始终覆盖整个页面高度
• background-position: center center 可以让图片在裁剪时保持居中显示，提升视觉效果

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