Change size of image only on height but not width

I have problem with my responsive-design. All elements are changing when I resize height and width of browser but background image is changing only when I change height. When I'm changing width then it's same.

Normal: https://imgur.com/a/GcpEnPy

Change width: https://imgur.com/a/DrS3k8E

Thanks for all your help

HTML:    
         <div class="wrap-hero-content">
              <div class="hero-content">
                <span class="typed"></span>
              </div>
          </div>
          <div class="mouse-icon margin-20">
            <div class="scroll"></div>
          </div>

CSS:    #home {
        background: url('../images/testimonial-bg.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-width: 100%;
        min-height: 100%;
        height: 100%;
        width: 100%;
        display: block;

        .wrap-hero-content{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        }

        .hero-content{
        position: absolute;
        text-align: center;
        min-width: 110px;
        left: 50%;
        top: 58%;
        padding: 65px;
        outline-offset: 8px;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        }