css - 背景图像在 1024px 以上消失

Question

谁能帮帮我。我创建了一个使用背景图片的网站。几个小时前它工作正常，但它们调整大小的方式似乎没有问题。

如果你去这里http://culturesmartbooks.co.uk/regions/asia.php它工作正常。

但是，在页面上http://culturesmartbooks.co.uk/regions/australasia.php ，当浏览器高于 1024px 时，背景图像消失。

这是亚洲页面的 HTML:

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

大洋洲:

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

我不明白为什么亚洲会显示而澳大拉西亚不会。请有人帮忙

Answer 1

为什么要在media里面写css？ http://prntscr.com/f1ugsz

删除媒体并默认编写样式，它将正常工作。