Background-image automatically resizes itself

Question

I've set a blue background image, added some content and was done. I've tried zooming in the site, and whenever I zoom in, the background image automatically pushes itself up and does not cover the founders and half of the yellow arrow.

How it looks normally

How it looks when I zoom in

Any idea on how to fix this?

* {
    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>

Thanks in advance. Let me know if something is unclear.

Answer 1

An alternate solution is to adjust the markup of your hero so that the people and arrow images are positioned at the bottom of the background, this means it will work on mobile/desktop and all heights, widths and zoom levels.

In this solution, we create a .hero container and place everything that is meant to be in front of the blue background inside of it. We position the images absolutely, from the bottom, transforming the arrow down 50%.

If you run into issues with the hard-coded height from the other answer then this will work for you.

.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>

Answer 2

I think you can do like this.

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