视差图像显示在桌面上但不在移动设备上

Question

我遇到了一个问题，我的视差图像没有显示在我的移动设备上，尽管在我的桌面上和在 Chrome 上使用移动检查视图时显示得很好。我已尝试清除移动设备上的缓存但仍然无法使用它，我还尝试了多种不同的移动设备。

这是相关网站的链接：https://kojinagatabrown.me/

这是我的代码：

body {
  background: black;
}

/* HOME */
.welcome {
  padding-top: 300px;
  padding-bottom: 500px;
  position: center;
  text-align: center;
}

#welcome-line {
  width: 25%;
  padding-top: 0;
  margin-top: 0;
}

.welcome h1 {
  padding-bottom: 0;
  margin-bottom: 10px;
}

.welcome h3 {
  margin-top: 10px;
}

.welcome div {
  border: 1px #ccc solid;
}

/* SCHOOL */
.education-container {
  padding-top: 500px;
  padding-bottom: 500px;
  height: 500px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  overflow-x: hidden;
  perspective-origin: 0%;
}

.education-container div {
  padding: 10px;
}

.education-text {
  display: flex;
  align-items: left;
  justify-content: left;
  flex-direction: column;
  text-align: left;
  flex-grow: 1;
  flex-basis: 20rem;
}

.education-text h3 {
  padding: 0;
  line-height: 0px;
}

.education-text p {
  margin: 0;
  padding: 0;
}

.learn-more {
  width: 120px;
  height: 40px;
  margin-top: 15px;
  border-radius: 8px;
  color: #05cbf7;
  background-color: black;
  border: 1px white solid;
}

.learn-more:hover {
  background-color: #0083a1;
  color: white;
}

#uofu {
  background: url(https://www.kojinagatabrown.me/wp-content/uploads/2021/06/BlockU_400px-300x300.png);
  width: 178px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-origin: border-box;
  flex-grow: 2;
}

/* WORK */
.work-container {
  padding-top: 500px;
  padding-bottom: 1000px;
  height: 500px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  overflow-x: hidden;
  perspective-origin: 0%;
}

.work-container div {
  padding: 10px;
}

#eaw {
  background: url("https://www.kojinagatabrown.me/wp-content/uploads/2021/06/EAWlogo-300x79.png");
  width: 200px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-origin: border-box;
  flex-grow: 1;
}

.work-text {
  display: flex;
  align-items: left;
  justify-content: left;
  flex-direction: column;
  text-align: left;
  flex-grow: 1;
  flex-basis: 20rem;
}

.work-text h3 {
  padding: 0;
  line-height: 0px;
}

.work-text p {
  margin: 0;
  padding: 0;
}

/* DEVICE SPECIFIC PROPERTIES */

/* mobile devices (320-479) */
@media screen and (max-width: 479px) {
  #uofu {
    background-size: 40%;
    background-position: right 2% bottom 50%;
  }

  .education-text h3 {
    margin-top: 50%;
  }

  #eaw {
    background-size: 35%;
    background-position: left 7% bottom 50%;
  }

  .work-text h3 {
    margin-top: 80%;
  }
}

/* tablets (481-769) */
@media screen and (min-width: 480px) {
  #uofu {
    background-size: 40%;
    background-position: right 1% bottom 50%;
  }

  .education-text h3 {
    margin-top: 40%;
  }

  #eaw {
    background-size: 35%;
    background-position: left 6% bottom 50%;
  }

  .work-text h3 {
    margin-top: 55%;
  }
}

/* small screens (770-1023) */
@media screen and (min-width: 770px) {
  #uofu {
    background-size: 25%;
    background-position: right 4% bottom 50%;
  }

  .education-text h3 {
    margin-top: 30%;

  }

  .education-text {
    flex-basis: 35rem;
    margin-left: 4%;
  }

  #eaw {
    background-size: 25%;
    flex-basis: 4rem;
    margin-left: 4%;
    background-position: left 9% bottom 50%;
  }

  .work-text h3 {
    margin-top: 40%;
  }
}

/* medium screens (laptops) (1024-1365) */
@media screen and (min-width: 1024px) {
  #uofu {
    background-size: 17%;
    background-position: right 17% bottom 50%;
  }

  .education-text h3 {
    margin-top: 27%;
  }

  .education-text {
    flex-basis: 35rem;
    margin-left: 5%;
  }

  #eaw {
    background-size: 20%;
    background-position: left 10% bottom 50%;
    margin-left: 5%;
  }

  .work-text h3 {
    margin-top: 25%;
  }

  .work-text {
    flex-grow: 2;
  }
}

/* large screens (large laptops) (1366-1535) */
@media screen and (min-width: 1366px) {
  #uofu {
    background-size: 15%;
    background-position: right 17% bottom 50%;
  }

  .education-text h3 {
    margin-top: 20%;
  }

  .education-text {
    flex-basis: 45rem;
    margin-left: 7%;
  }

  #eaw {
    background-size: 18%;
    background-position: left 16% bottom 50%;
    margin-left: 7%;
  }

  .work-text h3 {
    margin-top: 20%;
  }

  .work-text {
    flex-grow: 2;
  }
}

/* desktop screens (1536-1919) */
@media screen and (min-width: 1536px) {
  #uofu {
    background-size: 13%;
    background-position: right 20% bottom 50%;
  }

  .education-text h3 {
    margin-top: 20%;
  }

  .education-text {
    flex-basis: 45rem;
    margin-left: 7%;
  }

  #eaw {
    background-size: 18%;
  }

  .work-text {
    flex-grow: 2;
  }
}

/* high resolution screens (1920+) */
@media screen and (min-width: 1920px) {
  #uofu {
    background-size: 15%;
    background-position: right 23% bottom 50%;
  }

  .education-text h3 {
    margin-top: 19%;
  }

  .education-text {
    flex-basis: 45rem;
    margin-left: 9%;
  }

  #eaw {
    background-size: 16%;
    background-position: left 13% bottom 50%;
  }

  .work-text {
    flex-grow: 3;
  }

  .work-text h3 {
    margin-top: 13%;
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body style="color: white; font-family: Trebuchet MS">
  </body>

  <div class="welcome">
    <h1 style="color: white">
      KOJI NAGATA-BROWN
    </h1>
    <hr id="welcome-line">
    <h3>
      Hello, my name is Koji. Let me tell you about myself.
    </h3>
  </div>

  <div class="education-container">
    <div class="education-text">
      <h3>
       EDUCATION
      </h3>
      <p>
        Currently a junior at the University of Utah, majoring in Computer Science. Tracks in Web/Mobile Development, and Software Development. Planned graduation is Spring of 2023.
      </p>
      <button class="learn-more">
        Learn More!
      </button>
    </div>
    <div id="uofu"></div>
  </div>

  <div class="work-container">
    <div id="eaw"></div>
    <div class="work-text">
      <h3>
        WORK EXPERIENCE
      </h3>
      <p>
        I have worked at Education at Work for almost 2 years. During my time I have provided
        technical support for customers using Windows and Microsoft Office.
      </p>
      <button class="learn-more">
      Learn More!
      </button>
    </div>
  </div>

</html>

让我知道你们的想法，我认为这可能与移动设备上的资源分配有关，但我不明白为什么它会显示在桌面的移动视图中，而不是在实际的移动设备上.提前致谢。