HomeController索引视图页面背景图显示不全技术求助

当前你使用background-size: cover会强制图片缩放填满容器，超出容器的部分会被裁剪，这就是侧边和底部显示不全的核心原因。以下是几种可行的修改方案：

方案一：完整显示图片（无裁剪） #

将背景图属性调整为contain，配合居中定位和禁止重复，同时确保容器高度匹配视口（扣除body底部边距）：

<div
  class="bg-image p-5 text-center mb-5 text-black"
  style="background-image: url('../images/banner.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center center; min-height: calc(100vh - 60px);">
  <h1 class="mb-3 h2">Welcome to system</h1>

  <p>
    text
  </p>
</div>

• background-size: contain：保证图片完整显示，不会被裁剪
• background-repeat: no-repeat：避免图片重复填充容器空白区域
• background-position: center center：让图片在容器内居中对齐
• min-height: calc(100vh - 60px)：匹配body的margin-bottom: 60px，让容器高度占满剩余视口空间，避免底部被截断

方案二：填满容器同时优先显示底部内容 #

如果希望图片填满容器，可调整定位逻辑让底部内容完整显示，保留cover属性：

<div
  class="bg-image p-5 text-center mb-5 text-black"
  style="background-image: url('../images/banner.jpg'); background-size: cover; background-position: bottom center; min-height: calc(100vh - 60px);">
  <h1 class="mb-3 h2">Welcome to system</h1>

  <p>
    text
  </p>
</div>

• background-position: bottom center：将图片底部对齐容器底部，优先显示图片下半部分内容

方案三：调整容器边距释放显示空间 #

当前容器的p-5内边距和mb-5外边距可能压缩图片显示区域，可适当调整：

<div
  class="bg-image text-center text-black"
  style="background-image: url('../images/banner.jpg'); background-size: cover; background-position: center; min-height: calc(100vh - 60px); padding: 2rem;">
  <h1 class="mb-3 h2">Welcome to system</h1>

  <p>
    text
  </p>
</div>

• 减少内边距（从p-5改为padding: 2rem），去掉mb-5外边距，让图片获得更多显示空间

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