Image d'arrière-plan pleine hauteur utilisant CSS sur les appareils mobiles

J'essaie de configurer des requêtes multimédias pour les téléphones.

J'ai une image pleine largeur et une hauteur de 100vh, mais quand je la regarde au téléphone, il y a une image en haut mais pas en dessous.

Je veux que l'image se déplace à pleine hauteur lorsque la largeur est réduite.

Je n'ai pas beaucoup d'expérience avec le HTML, l'auto-apprentissage et j'apprécierais de l'aide.

C'est ce que j'ai essayé jusqu'à présent,

    .container-fluid {
  background-image: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("../../img/project-bg.jpeg");
  height: 100vh;
  background-size: cover;

}

.badge-purple {
  background-color: #563C7C;
  color: #fff;
}
 .padding-custom {
   padding-top: 10rem;
 }

.card {
  transition: all 0.2s;
}

.card:hover {
  transform: scale(1.1);
}
.card-img-top {
  height: 8rem;
}

.card-1 {
  animation: zoomIn 0.5s ease-in backwards;
}

.card-2 {
  animation: zoomIn 0.5s ease-in backwards;
  animation-delay: 0.5s;
}

.card-3 {
  animation: zoomIn 0.5s ease-in backwards;
  animation-delay: 1s;
}

.card-4 {
  animation: zoomIn 0.5s ease-in backwards;
  animation-delay: 1.5s;
}

.cta {
  animation: zoomIn 0.5s ease-in backwards;
  animation-delay: 2s;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@media only screen and (max-width: 600px) {
  .container-fluid {
    height: 100vh;
    background-size: 100%;
  }
  .padding-custom{
    padding-top: 5rem;
  }

  .cta {
    margin-bottom: 4rem;
  }

  .card {
    margin: 0 2rem;
  }
}

Voici mon code complet:

<div class="container-fluid">
    <div class="container">
        <div class="row padding-custom">
          <div class="col-md-3 mt-4 mb-4">
            <div class="card card-1">
              <img
                class="card-img-top"
                src="../../../assets/images/natours.png"
                alt="Card image cap"
              />
              <div class="card-body">
                <h5 class="card-title"><strong>Natours</strong></h5>
                <p class="card-text">
                  A Responsive, Single Page Website Template using SASS pre-processor.
                </p>
                <div class="row pl-3 mb-2">
                  <a href="#" target="_blank" class="card-link">View Project &rarr;</a>
                </div>

                <span class="badge badge-primary">HTML5 / CSS3</span>
                <span class="badge badge-info ml-2">Responsive</span>
              </div>
            </div>
          </div>
          <div class="col-md-3 mt-4 mb-4">
            <div class="card card-2">
              <img
                class="card-img-top"
                src="../../../assets/images/emp_mgmt.png"
                alt="Card image cap"
              />

              <div class="card-body">
                <h5 class="card-title"><strong>Employee Management</strong></h5>
                <p class="card-text">
                  A CRUD application using Firebase Authentication & Cloud Firestore.
                </p>
                <div class="row pl-3 mb-2">
                  <a href="#" target="_blank" class="card-link">View Project &rarr;</a>
                </div>

                <span class="badge badge-danger">Angular 7</span>
                <span class="badge badge-purple ml-2">Bootstrap 4</span>
              </div>
            </div>
          </div>
          <div class="col-md-3 mt-4 mb-4">
            <div class="card card-3">
              <img
                class="card-img-top"
                src="../../../assets/images/pigdice.png"
                alt="Card image cap"
              />
              <div class="card-body">
                <h5 class="card-title"><strong>Pig Dice Game</strong></h5>
                <p class="card-text">
                  An in-browser clone of the classic Pig Dice Game for two players.
                </p>
                <div class="row pl-3 mb-2">
                  <a href="#" target="_blank" class="card-link">View Project &rarr;</a>
                </div>

                <span class="badge badge-warning">JavaScript</span>
                <span class="badge badge-primary ml-2">HTML5 / CSS3</span>
              </div>
            </div>
          </div>
          <div class="col-md-3 mt-4 mb-4">
            <div class="card card-4">
              <img
                class="card-img-top"
                src="../../../assets/images/linux.png"
                alt="Card image cap"
              />
              <div class="card-body">
                <h5 class="card-title">
                  <strong>Linux Server Configuration</strong>
                </h5>
                <p class="card-text">
                  Configure & deploy a Flask Web Application
                </p>
                <div class="row pl-3 mb-2">
                  <a href="#" target="_blank" class="card-link">View Project &rarr;</a>
                </div>

                <span class="badge badge-secondary">Amazon Lightsail</span>
                <span class="badge badge-dark ml-2">Apache Server</span>
              </div>
            </div>
          </div>
        </div>
        <div class="cta text-center">
            <a href="#" target="_blank" class="btn btn-outline-light mt-3 text-center"
            >See More Projects</a>
        </div>

      </div>

</div>

CSS:

height: 100%
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Merci pour votre aide!