Фоновое изображение полной высоты с использованием CSS на мобильных устройствах

Question

Я пытаюсь настроить медиазапросы для телефонов.

У меня полноразмерное изображение и высота 100vh, но когда я смотрю на него по телефону, изображение вверху, но не ниже.

Я хочу, чтобы изображение перемещалось на полную высоту при уменьшении ширины.

Я не очень разбираюсь в HTML, самообучаюсь и буду признателен за помощь.

Это то, что я пробовал до сих пор,

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

Вот мой полный код:

<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:

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

Спасибо за вашу помощь!

Answer 1

Удаление height:100% и сохранение background-size: cover; решит текущую проблему.

Answer 2

Сделав background-size: 100% 100%;, он охватит весь размер, но изображение будет растянуто.Одним из решений является:

background-size: 100% 100%;

Другое, я предлагаю сделать background-attachment: fixed; и background-size: cover;, которые будут выполнять прокрутку содержимого и изображение не будет растягиваться :)

Answer 3

Добавьте ниже свойства, это сделает фиксированное фоновое изображение.

    background-position: center;
    background-attachment: fixed;
    min-height: 100vh; 

Answer 4

Добавьте ниже свойства, это поможет вам

background-size: 100%;
height: 100vh;