title: Full Height Background Image using CSS on Mobile devices
body: <p>I am trying to set up media queries for phones.</p>
  
  <p>I have a full width image &amp; 100vh height but when I look at it on the phone, there's image on the top but not below.</p>
  
  <p>I want the image to move to full height when the width is reduced. </p>
  
  <p><a href="https://i.stack.imgur.com/5H2yg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5H2yg.png" alt="The image should be full height"></a></p>
  
  <p>I am not very experienced with HTML, self learning and I would appreciate some help.</p>
  
  <p>This is what I've tried so far,</p>
  
  <pre><code>height: 100%
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  </code></pre>
  
  <p>Here's my full code:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row padding-custom"&gt;
            &lt;div class="col-md-3 mt-4 mb-4"&gt;
              &lt;div class="card card-1"&gt;
                &lt;img
                  class="card-img-top"
                  src="../../../assets/images/natours.png"
                  alt="Card image cap"
                /&gt;
                &lt;div class="card-body"&gt;
                  &lt;h5 class="card-title"&gt;&lt;strong&gt;Natours&lt;/strong&gt;&lt;/h5&gt;
                  &lt;p class="card-text"&gt;
                    A Responsive, Single Page Website Template using SASS pre-processor.
                  &lt;/p&gt;
                  &lt;div class="row pl-3 mb-2"&gt;
                    &lt;a href="#" target="_blank" class="card-link"&gt;View Project &amp;rarr;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;span class="badge badge-primary"&gt;HTML5 / CSS3&lt;/span&gt;
                  &lt;span class="badge badge-info ml-2"&gt;Responsive&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 mt-4 mb-4"&gt;
              &lt;div class="card card-2"&gt;
                &lt;img
                  class="card-img-top"
                  src="../../../assets/images/emp_mgmt.png"
                  alt="Card image cap"
                /&gt;
  
                &lt;div class="card-body"&gt;
                  &lt;h5 class="card-title"&gt;&lt;strong&gt;Employee Management&lt;/strong&gt;&lt;/h5&gt;
                  &lt;p class="card-text"&gt;
                    A CRUD application using Firebase Authentication &amp; Cloud Firestore.
                  &lt;/p&gt;
                  &lt;div class="row pl-3 mb-2"&gt;
                    &lt;a href="#" target="_blank" class="card-link"&gt;View Project &amp;rarr;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;span class="badge badge-danger"&gt;Angular 7&lt;/span&gt;
                  &lt;span class="badge badge-purple ml-2"&gt;Bootstrap 4&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 mt-4 mb-4"&gt;
              &lt;div class="card card-3"&gt;
                &lt;img
                  class="card-img-top"
                  src="../../../assets/images/pigdice.png"
                  alt="Card image cap"
                /&gt;
                &lt;div class="card-body"&gt;
                  &lt;h5 class="card-title"&gt;&lt;strong&gt;Pig Dice Game&lt;/strong&gt;&lt;/h5&gt;
                  &lt;p class="card-text"&gt;
                    An in-browser clone of the classic Pig Dice Game for two players.
                  &lt;/p&gt;
                  &lt;div class="row pl-3 mb-2"&gt;
                    &lt;a href="#" target="_blank" class="card-link"&gt;View Project &amp;rarr;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;span class="badge badge-warning"&gt;JavaScript&lt;/span&gt;
                  &lt;span class="badge badge-primary ml-2"&gt;HTML5 / CSS3&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 mt-4 mb-4"&gt;
              &lt;div class="card card-4"&gt;
                &lt;img
                  class="card-img-top"
                  src="../../../assets/images/linux.png"
                  alt="Card image cap"
                /&gt;
                &lt;div class="card-body"&gt;
                  &lt;h5 class="card-title"&gt;
                    &lt;strong&gt;Linux Server Configuration&lt;/strong&gt;
                  &lt;/h5&gt;
                  &lt;p class="card-text"&gt;
                    Configure &amp; deploy a Flask Web Application
                  &lt;/p&gt;
                  &lt;div class="row pl-3 mb-2"&gt;
                    &lt;a href="#" target="_blank" class="card-link"&gt;View Project &amp;rarr;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;span class="badge badge-secondary"&gt;Amazon Lightsail&lt;/span&gt;
                  &lt;span class="badge badge-dark ml-2"&gt;Apache Server&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="cta text-center"&gt;
              &lt;a href="#" target="_blank" class="btn btn-outline-light mt-3 text-center"
              &gt;See More Projects&lt;/a&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .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;
    }
  }
  </code></pre>
  
  <p>Thanks for your help!</p>