[FIXED] How can i have a cover background-image without any deformation?

Issue

(Sorry if my english isn't that good) I have a problem with my code, i'm trying to create a background-image fullsize screen but my image just distords itself in height or in lenght when it doesn't correspond to the size image. What I want to do is cropping it instead of deformint it... My code :

HTML

<div class="container-fluid px-0">
    <main>
        <!-- Accueil -->
        <section>
            <div class="container justify-content-start">
                <img class="img-fluid" src="ressources/images/picto_appareil_photo.jpg" alt="" title="" width="200" height="200">
                <h2>Matheo TUMBARELLO</h2>
                <h1>Etudiant BUT informatique<br><br>Aspire à devenir développeur web & mobile fullstack</h1>
            </div>
        </section>
        
        <!-- Formations -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Compétences -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Portfolio -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Experiences -->
        <section class=""> 

        </section>
        <div class="transition"></div>

        <!-- Contact -->
        <section class=""> 
            <form>

            </form>
        </section>
    </main>
</div>

CSS

@keyframes zoomloop {
    0% {
      background-size: 100% 100%;
    }
    100% {
      background-size: 105% 105%;
    }
  }
section:first-child{
    height: 100vh;
    background: url("ressources/images/background_laptop.jpg") top right;
    background-position: cover;
    animation: zoomloop 5s infinite alternate;
}

image

Solution

The main error here is that cover is a value for background-size and not background-position

This should fix it:

background: url("ressources/images/background_laptop.jpg"); /*Remove initial top right instruction*/
background-size: cover;
background-position: 50% 50%;

If you want your image to keep ratio while making the zoom effect, you need the auto property. Depending on the image ratio, the zoom would apply either on the height, or width of your image

.image {
    background-size: 100% auto;
}
.image:hover {
    background-size: 105% auto;
}

Answered By - savageGoat

Answer Checked By - Marilyn (PHPFixing Volunteer)