Background image disappears above 1024px - css

Question

Please can someone help me. I have created a website which uses background images. It was working fine a few hours ago but not there seems to be a problem with the way they resize.
If you go here http://culturesmartbooks.co.uk/regions/asia.php it is working fine.
However, on the page http://culturesmartbooks.co.uk/regions/australasia.php, when browser is above 1024px the background image disappears.
Here is the HTML for the Asia page:
<div class="asiaHero">
<div class="caption">
<h1>Asia</h1>
<img src="../images/logoBlue.png">
</div>
CSS:
.asiaHero {
background-image: url("../images/asiaHero.jpg");
height: 1000px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.asiaHero .caption {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background: rgba(0,0,0,0.2);
height: auto;
padding: 0.5%;
}
.asiaHero .caption img {
width: 200px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
.asiaHero .caption img {
width: 300px;
}
}
/* md */
#media (min-width: 992px) {
.asiaHero .caption img {
width: 400px;
}
}
/* lg */
#media (min-width: 1200px) {
.asiaHero .caption img {
width: 500px;
}
}
#media screen and (max-width: 1024px) {
.asiaHero {
background-attachment: scroll;
max-height: 650px;
background-position: top;
}
.asiaHero .caption {
top: 50%;
}
Australasia:
<div class="australasiaHero">
<div class="caption">
<h1>Australasia</h1>
<img src="../images/logoBlue.png">
</div>
CSS:
.australasiaHero {
background-image: url("../images/australasiaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.australasiaHero .caption {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background: rgba(0,0,0,0.2);
height: auto;
padding: 0.5%;
}
.australasiaHero .caption img {
width: 200px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
.australasiaHero .caption img {
width: 300px;
}
}
/* md */
#media (min-width: 992px) {
.australasiaHero .caption img {
width: 400px;
}
}
/* lg */
#media (min-width: 1200px) {
.australasiaHero .caption img {
width: 500px;
}
}
#media screen and (max-width: 1024px) {
.australasiaHero {
background-attachment: scroll;
max-height: 650px;
background-position: top;
}
.australasiaHero .caption {
top: 50%;
}
I cannot see why Asia would display and Australasia would not. Please can someone help

Answer 1

why did you write the css inside media? http://prntscr.com/f1ugsz
remove media and write the styles as default and it will work fine.