看起来你的背景没铺满主要有几个可能的原因，我给你逐个排查和解决：

1. 先检查背景图片路径是否正确 #

你写的 url('img/bg-background-jpg') 里后缀少了个.，应该是 url('img/bg-background.jpg')，路径错误的话背景根本不会显示，先确认这个基础问题。

2. 高度设置的问题：height: auto 可能无法撑满你需要的区域 #

如果你的 .bg-wrapper 里的内容高度不够，或者你希望它占满整个视口高度，height: auto 只会根据内容自适应高度，这时候可以换成 min-height: 100vh（vh是视口高度单位，100vh就是占满整个浏览器窗口高度），同时确保父元素（比如body和html）的高度也设置为100%，避免高度塌陷：

html, body {
  height: 100%;
  margin: 0; /* 去掉body默认的margin，避免出现白边 */
}
.bg-wrapper {
  background-image: url('img/bg-background.jpg');
  width: 100%;
  background-size: cover;
  min-height: 100vh; /* 或者用height:100%，但min-height更灵活 */
  border: 1px solid red;
  box-sizing: border-box; /* 让border包含在width:100%里面，避免超出父元素 */
}

3. 处理Bootstrap可能带来的默认样式影响 #

Bootstrap的容器类（比如container）默认有左右padding，如果你在.bg-wrapper里面用了这些类，可能会导致背景和内容之间有空白。这时候可以给.bg-wrapper加上padding: 0，或者调整内部容器的样式，确保背景能铺满整个wrapper：

.bg-wrapper {
  /* 其他样式不变 */
  padding: 0; /* 去掉wrapper自身的padding */
}

4. 补充背景定位和重复设置 #

有时候即使background-size: cover，如果背景定位不对也可能看起来没铺满，加上background-position: center center和background-repeat: no-repeat来确保背景居中且不重复：

.bg-wrapper {
  background-image: url('img/bg-background.jpg');
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
  border: 1px solid red;
  box-sizing: border-box;
}

你可以先从检查图片路径开始，然后逐步调整高度和样式，应该就能解决背景无法覆盖整个元素的问题了。

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