Background image is creating unnecessary gap at di

Question

Randomly a gap is creating at different screen size below two image.I have tried to solve this problem for 2/3 days.But failed every time.Please help me to solve this problem.Related codes are given below image.

Problem at midium screen size:

Problem at large screen size:

HTML:

<div class="section-three">
        <div class="container-fluid">
            <div class="row">
        <!---------------------- Left-Area -------------------> 
                <div class="s3-left col-sm-8">
                    <a href="#"><img src="images/logo4.png" alt="logo" class="img-responsive center-block"/></a>
                </div>
        <!-----------------------Right-Area ------------------->    
                <div class="s3-right col-sm-4">
                    <div class="container-fluid">
                        <div class="s3-right-up row">
                            <div class="container-fluid">
                                <div class="s3-logo row">
                                    <a href="#" target="_self">
                                        <img src="images/logo3.png" alt="logo" class="img-responsive center-block" style="width:32px; height:auto;"/>
                                    </a>
                                </div>
                                <div class="s3-heading row">
                                    <h5 class="text-uppercase text-center"> Vintage oliva </h5>
                                </div>  
                                <div class="s3-description row">
                                    <div class="gap">
                                        <p class="text-justify">
                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="s3-right-down row">
                            <div class="container-fluid">
                                <div class="s3-image row">
                                    <img src="images/background3.jpg" alt="logo" class="img-responsive"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

.section-three .s3-left.col-sm-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.s3-left {
    background: url("images/background2.jpg") no-repeat 0 0 / 100% 100%;
}
.s3-left img {
    width: 92px;
    padding: 199px 0;
}
.s3-image img {
    width: 100%;
}
.s3-logo {
    padding: 48px 0 25px;
}
.s3-heading h5 {
    margin: 0;
    padding: 0 0 10px;
}
.s3-description .gap {
    width: 80%;
    margin: auto;
}
.s3-description p {
    font-size: 12.4px;
    padding-bottom: 58px;
}

Answer 1

Try setting the background-size to cover:

.s3-left {
    background: url("images/background2.jpg") no-repeat 0 0 / 100% 100%;
    background-size: cover;
}