Media query for image to work on Desktop and Mobile - css

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>