背景图像自动调整自身大小

Question

我设置了蓝色背景图片，添加了一些内容，然后就完成了。我试过放大网站，每当我放大时，背景图像会自动向上推，不会覆盖黄色箭头的创始人和一半。

正常情况下的样子

放大后的样子

知道如何解决这个问题吗？

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    
}

.container {
    max-width: 900px;
    margin: 0 auto;
}

.post-header {
    
    background-color: #20cfcf;
    background-image: url("../img2/header_background.png");
    background-size: cover;
    background-position: center center;
    height: 60Vh;
    text-align: center;
}

.post-header h2 {
    text-align: center;
    padding-top: 2em;
    font-weight: 800;
    font-size: 1.7em;
    color: #172025
}

.post-header h1 {
    font-size: 92pt;
    font-weight: 900;
    color: white;
    margin: 0;
    margin-top: em;
}



.founders {
    margin-top: -6em;
    
}


.arrow-box {
    position: relative;
    background: url("https://i.imgur.com/gp3z7z5.png") no-repeat center center;
    background-size: contain;
    margin: auto;
    width: 400px;
    height: auto;
    margin-top: -3em;
  }
  
 
  .arrow {
    position: relative;
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    font-size:1.7rem;
    height:80px;
    color: black;
  }

  .dev-description {
      font-size: 1.4em;
      font-weight: 300;
      line-height: 1.3em;
  }

  .recognize {
      margin-top: 3em;
      text-transform: uppercase;
      font-weight: 700;
  }

  .images {
      padding: 1em;
      display: inline;
      margin-top: 2em;
  }

  .images:hover,
  .images:focus {
      color: white;
  }

  .img-container {
      margin-top: 1.3em;
  }

<section class="post-header">

         <div class="wrapper">
             CHYBA TU 
            <h2>HI. WE'RE TILDE.</h2>
            <h1>WE LIVE AND <br> BREATHE CODE.</h1>
            <img src="img2/founders.png" class="founders" height="294px" width=425px alt="">
            <div class="arrow-box">
                <a href="#" class="arrow">Meet the team</a>
            </div>
            <div class="container">
                <p class="dev-description">
                We're a small team of developers who are passionate about crafting great software.
                We're some of the faces behind Ember.js, Ruby on Rails, jQuery and more. <br>
                We're here to help you build the products and tools of the future.
                </p>
                
                <p class="recognize">
                    you may recognize us from around town
                </p>
                <div class="img-container">
                    
                    <div class="images">
                        <img src="img2/rails.png" alt="">
                    </div>

                    <div class="images">
                        <a href=""><img src="img2/jquery.png" alt=""></a>
                    </div>

                    <div class="images">
                        <a href=""><img src="img2/ember.png" alt=""></a>
                    </div>

                    <div class="images">
                        <a href=""><img src="img2/handlebars.png" alt=""></a>
                    </div>

                    <div class="images"></div>
                        <a href=""><img src="img2/bundler.png" alt=""></a>
                    </div>
                </div>
              </div>
            </div>
            
</section>

提前致谢。如果有什么不清楚的地方，请告诉我。

Answer 1

我觉得你可以这样做。

.post-header {
    background-color: #20cfcf;
    background-image:
    url("../img2/header_background.png");
    background-size: cover;
    background-position: center center;
    height: 582px;
    text-align: center;
}

Answer 2

另一种解决方案是调整英雄的标记，使人物和箭头图像位于背景的底部，这意味着它将适用于 mobile/desktop 以及所有高度、宽度和缩放级别。

在此解决方案中，我们创建了一个 .hero 容器，并将蓝色背景前面的所有内容都放在其中。我们绝对定位图像，从底部开始，将箭头向下移动 50%。

如果您运行对其他答案中的硬编码高度有疑问，那么这对您有用。

.hero {
  background-color: #20cfcf;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 0 200px;
  position: relative;
  text-align: center;
}

.preheading {
  font-size: 1.7em;
  font-weight: 800;
  text-transform: uppercase;
}

.heading {
  color: #fff;
  font-size: 92pt;
  font-weight: 900;
  text-transform: uppercase;
}

.people {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

img {
 border: 1px solid black;
}

<div class="hero">
  <div class="preheading">Hi. We're Tilde.</div>
  <div class="heading">We live and<br>breate code.</div>
  <img class="people" src="https://via.placeholder.com/400x300">
  <img class="arrow" src="https://via.placeholder.com/200x80">
</div>

背景图像自动调整自身大小

Background-image automatically resizes itself

html

css

background-image