Search code examples
htmlcssbackground-image

Background-image automatically resizes itself

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 enter image description here

How it looks when I zoom in enter image description here

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.

Solution

  • 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;
}