Media query for image to work on Desktop and Mobile

Question

I have a background image on my website which works fine on Desktop but when I try to view the website on Mobile the image disappear. How can I fix this so it is responsive? I have already added media query and try to fix this using online resources but I am not sure what I am missing.

@media screen and (min-width: 650px){
  header.page-header {
    text-align: center;
    color: white;
    background-image: url("https://images.pexels.com/photos/1040499/pexels-photo-1040499.jpeg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100%;
    background-attachment: scroll;
}}

header.page-header .intro {
  padding-top: 100px;
  padding-bottom: 100px;
}

header.page-header .intro p {
  font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 25px;
}

header.page-header .intro h1 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  header.page-header .intro {
    padding-top: 200px;
    padding-bottom: 200px;
  }
  
  header.page-header .intro p {
    font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 25px;
  }
  
  header.page-header .intro h1 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 65px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    text-transform: uppercase;
  }
}

<header class="page-header">
  <div class="container">
    <div class="intro">
      <p>Hello.</p>
      <a class="scroll-trigger" href="#about">
        <div class="scroll-down">
          <span>
            <i class="fa fa-angle-down fa-4x"></i>
          </span>
        </div>
      </a>
    </div>
  </div>
</header>

Answer 1

Just remove media query from your CSS

@media screen and (min-width: 650px){
    // CODE
}

if you write this in your CSS, that code apply only when your screen resolution size is grater than 650px or min-width: 650px

EDIT

In your site there is .header.page-header class contains (min-width: 500px) so, remove it and your problem solved.

replace background-size: 100% to background-size: cover

header.page-header {
  text-align: center;
  color: white;
  background-image: url("https://images.pexels.com/photos/1040499/pexels-photo-1040499.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: 100%;
  background-attachment: scroll;
}

header.page-header .intro {
  padding-top: 100px;
  padding-bottom: 100px;
}

header.page-header .intro p {
  font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 25px;
}

header.page-header .intro h1 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 25px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  header.page-header .intro {
    padding-top: 200px;
    padding-bottom: 200px;
  }
  
  header.page-header .intro p {
    font-family: 'Old Standard TT', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 25px;
  }
  
  header.page-header .intro h1 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 65px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    text-transform: uppercase;
  }
}

<header class="page-header">
  <div class="container">
    <div class="intro">
      <p>Hello.</p>
      <a class="scroll-trigger" href="#about">
        <div class="scroll-down">
          <span>
            <i class="fa fa-angle-down fa-4x"></i>
          </span>
        </div>
      </a>
    </div>
  </div>
</header>