在页眉和页脚之间调整 HTML 背景图像 [重复]答案

【问题标题】：Fit HTML background image between header and footer [duplicate]在页眉和页脚之间调整 HTML 背景图像 [重复]
【发布时间】：2020-05-03 18:59:43
【问题描述】：

我是一个初学者，正在设计一个新的 HTML 页面，其中包含三个部分的页眉、内容（图像）和页脚，并且我已将背景图像设置在页眉和页脚之间。但是当我运行时，图像的某些部分隐藏在页脚下。这是我到目前为止所做的。感谢是否有人可以在这方面提供帮助！

我尝试在 CSS 中将高度设置为 100%，但它仍然没有改变显示。背景图像会动态变化，因此即使图像发生变化，它也必须完美地适应页眉和页脚。

.login,
.image {
  min-height: 100vh;
}

.bg-image {
  background: url('https://img.pngio.com/human-man-person-icon-png-and-vector-for-free-download-pngtree-human-icon-png-512_512.png');
  background-size: cover;
  background-position: center;
  /* Full height */
  background-repeat: no-repeat;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<header style="background-color:aqua">
  <div class="text-left text-white" style="width:300px;">
    Header TESTING&nbsp;&copy;Header
  </div>
</header>

<div class="container-fluid">
  <div class="container-fluid">
    <div class="row no-gutter">
      <div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
      <div class="col-md-8 col-lg-6">
        <div class="login d-flex align-items-center py-5">
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="navbar fixed-bottom navbar-toggleable-sm navbar-light footer border-top" style="background-color:aqua">
  <div class="text-left text-white" style="width:300px;">
    FOOTER TESTING&nbsp;&copy;Footer
  </div>
</footer>

【问题讨论】：

图像未显示在 sn-p 中。请对其进行编辑，使图像显示为您的屏幕截图中的样子

标签： html css responsive

【解决方案1】：

请点击下面的链接你会明白的。

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

如果您需要更清楚地了解以下一项。

enter link description here

【讨论】：