Css 背景图像在1024px以上消失

有人能帮我吗。我创建了一个使用背景图像的网站。几个小时前它还可以正常工作，但它们的大小似乎没有问题

如果你到这里来，它工作得很好

但是，在页面上，当浏览器高于1024px时，背景图像将消失

以下是亚洲页面的HTML：

<div class="asiaHero">
<div class="caption">
    <h1>Asia</h1>
    <img src="../images/logoBlue.png">
</div>

澳大利亚：

<div class="australasiaHero">
<div class="caption">
    <h1>Australasia</h1>
    <img src="../images/logoBlue.png">
</div>

---

我不明白为什么亚洲会有这样的表现，而澳大利亚不会。请有人帮忙

你为什么要在媒体中编写css

删除介质并将样式作为默认样式写入，这样就可以正常工作

<div class="australasiaHero">
<div class="caption">
    <h1>Australasia</h1>
    <img src="../images/logoBlue.png">
</div>

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