How can i have a cover background-image without any deformation?-CodePudding

(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 >
    <main>
        <!-- Accueil -->
        <section>
            <div >
                <img  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 > 

        </section>
        <div ></div>

        <!-- Compétences -->
        <section > 

        </section>
        <div ></div>

        <!-- Portfolio -->
        <section > 

        </section>
        <div ></div>

        <!-- Experiences -->
        <section > 

        </section>
        <div ></div>

        <!-- Contact -->
        <section > 
            <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

CodePudding user response：

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