html - 在页眉和页脚之间调整 HTML 背景图像

问题描述

我是一名初学者，正在设计一个新的 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>

标签： htmlcssresponsive

html - 在页眉和页脚之间调整 HTML 背景图像

问题描述

解决方案

推荐阅读