当页眉不适合宽度时，页眉被切断答案

【问题标题】：Header is cut off when it does not fit in the width当页眉不适合宽度时，页眉被切断
【发布时间】：2022-06-14 00:15:24
【问题描述】：

我的页面标题有问题，

我有一个 div，里面有 2 个 div，在第一个 div 中是背景作为背景，在第二个 div 中我有一个图像也作为背景，位于稍微下方，以产生从第一个 div 突出的效果.

我的问题是减小浏览器的大小，我想简单地减小所有内容并使其可读，第一个 div 表现良好，但是上面的图像并没有减小它的大小，所以它被剪切了不输入页面宽度。

我该如何解决这个问题？

header .container-fluid {
  padding-left: 0;
  padding-right: 0;
  height: 550px;
  position: relative;
}

header .banner {
  background-image: url("../images/banner.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  width: 100%;
  position: absolute;
  bottom: -70px;
}

header .parallax {
  height: 475px;
  background-image: url("../images/banner_parallax.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: inherit;
  background-attachment: fixed;
}

<header>
  <div class="container-fluid">
    <div class="parallax"></div>
    <div class="banner"></div>
  </div>
</header>

【问题讨论】：

标签： html css

【解决方案1】：

background-size 属性必须为 div 元素（“视差”和“横幅”）设置为 100%。请参阅下面的代码。

header .container-fluid {
  padding-left: 0;
  padding-right: 0;
  height: 550px;
  position: relative;
}

header .banner {
  background-image: url("https://picsum.photos/600/100");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%; /* This line was added */
  height: 500px;
  width: 100%;
  position: absolute;
  bottom: -70px;
}

header .parallax {
  height: 475px;
  background-image: url("https://picsum.photos/600/400");
  background-repeat: no-repeat;
  background-size: 100%; /* This line was changed */
  background-position: inherit;
  background-attachment: fixed;
}

<header>
  <div class="container-fluid">
    <div class="parallax"></div>
    <div class="banner"></div>
  </div>
</header>

【讨论】：