Espace entre texte et background-image

Bonjour à tous
J'ai une question qui me taraude ..
Je fais actuellement la partie responsive de mon site internet et je rencontre un problème avec mon background-image . J'ai du texte en dessous et mon background image prend beaéucoup de hauteur du coup j'ai un espace énorme et je ne sais pas comment faire

<div class="image-presentation"> </div>
		<div class="demi-cercle-droit"> </div>
		<div class="fleche-droite"> <i class="fas fa-angle-right"></i> </div>
 		<div class="demi-cercle-gauche"> </div>
		<div class="fleche-gauche"> <i class="fas fa-angle-left"></i> </div>
		

		<h1 class="titre-principal"> <span>WEBAGENCY</span>:L'AGENCE DE TOUS</br> VOS PROJETS ! </h1>
				<p class="presentation"> Vous avez un projet web ? la Webagency vous aide à le réaliser!</p>
		
		
				<p><a href="#info"><input type="button"value="Plus d'infos" class="bouton-info"> </a></p>

</section>


<div class="head">

	<h1 class="titre-services"> Nos services </h1>


	<div class="trait"> <div class="circle"><i class="fas fa-circle"></i></div></div>
		

		<p class="description"> Nous nous adaptons à chacuns de vos projets afin qu'ils soient uniques,esthétiques et performants. 
		</p>
</div>

<section>


<aside>
			<img src="images/pic_pc.png" alt="photo de pc" /> <!-- Image PC -->
</aside>

		
<div class="contenu">
	

    <article>
      <h2><div class="cercle"><i class="fas fa-chart-line"></i></div> UX Design</h2>
      <p>Amélioration de l'expérience utilisateur par l'anticipation des attentes et des besoins de chacuns.</p>
    </article>
    <article>
      <h2><div class="cercle"><i class="fas fa-chart-pie"></i></div> UI Design</h2>
      <p>Expérience de navigation la plus intuitive possible via un design fonctionnel...</p>
    </article>
    <article>
      <h2><div class="cercle"><i class="fas fa-cubes"></i></div> SEO</h2>
      <p>Augmentation de la visibilité et de la qualité de votre site internet au sein des moteurs de recherche via le référencement naturel.</p>
    </article>
  </div>

	
</div>
		
	
</section>

.image-presentation
{
	
background-size:120%;
background-position: center top 30%;
	
}

.titre-principal
{
	font-size: 25px;
	position: absolute;
	top:16%;

}



	
.presentation
{
	font-size: 16px;
	position: absolute;
	top:27%;
}

	.bouton-info
	{
		position: absolute;
		top:35%;
		left: 5%;
	
	}
	

.demi-cercle-droit /* Cercle image principale */
{
    
    width: 75px;
    height: 40px; 
    border-top-left-radius: 50px;  
     border-top-right-radius: 50px;
    border: none;   
    transform: rotate(-90deg);
    position:absolute;
    left:89.5%;
    top: 25%;
    padding-right: 0px;
    margin-right: 0px;
    background-color: grey;
    background: rgba(0, 0, 0, 0.5); 

}




.demi-cercle-gauche  /* Cercle image principale */
{ 


    width: 75px;
    height: 40px; 
    border-top-left-radius: 50px;
     border-top-right-radius: 50px;  
    border: none;   
    transform: rotate(-90deg);
    position:absolute;
    left:-1%;
    top: 25%;
    transform: rotate(90deg);
    background-color: grey;
    background: rgba(0, 0, 0, 0.5); 

}

.fleche-droite /* Flèche image principale */
{
    font-size:35px;
    color: white;
    position: absolute;
    right: 4%;
    top: 25%;

}

.fleche-gauche /* Flèche image principale */
{
    font-size:35px;
    color: white;
    position: absolute;
    left:2%;
    top: 25%;
}

Je reprécise que c'est mon code pour le responsive tablette

Hello

Je pense que le mieux, lorsque que vous rencontrez un problème "visuel", est de le recréer avec jsfiddle ou codepen ou autre, sinon inclure le lien si le site est en production. Cela nous aiderait énormément....