不会使用@media查询来调整背景图片的大小？

Question

因此，我在各种文字后面都有一张背景图片。在CSS中，它设置为background-size：1000px;

当我将视口窗口扩大到@media only screen / * Tablet * /和（最小宽度：768px）时，我希望它调整大小（放大），同时仍保留在其容器的范围内（保持高度）裁剪很重要。我只想放大图片以填充左右死角。）我尝试了明显的背景尺寸：2000px；但是，背景图片仍保持其原始的1000px，我不知道为什么。

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

advert  {
  grid-area: advert;
  background: url(./mi-vr-5.jpg);
  background-position-x: 50%;
  background-position-y: 75%;
  background-size: 1000px;
}

@keyframes bg-righttoleft {
  0% {
    background-position: 20% 75%;
    opacity: 0;
  }
  100% {
    background-position: 50% 75%;
  }
}
@media only screen /* Tablet */
  and (min-width: 768px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }

    advert  {
      background-repeat: no-repeat;
      font-size: 0.7em;
      background-size: 2000px;
    }
}
@keyframes bg-righttoleft {
  0% {
    background-position: 200% 75%;
    opacity: 0;
  }
  100% {
    background-position: 50% 75%;
  }
}

<advert class="bg-righttoleft">
      <div class="title-shift">
        <h1 class="title text-style">How to VR</h1>
        <h3 class="title-shift-h3 text-style">Guiding you to the world of VR</h3>
        <p class="title-shift-p">Whether you're purchasing your first VR headset or simply interested we're here to answer all of your questions.</p>
      </div>
      <div class="channel">
        <h3 class="chan-text">Review of the week</h3>
        <a href="https://www.youtube.com/channel/UC-6OW5aJYBFM33zXQlBKPNA">
        <img class="chan-img" src="./engadget.jpg" alt="Engadget logo"></a>
      </div>
    </advert>