Angular 18 — фоновое изображение не отображается на мобильном устройстве, но работает в браузере и инструментах Chrome

Я решил переделать свой личный сайт (www.coltstreet.com), и использую медиа-запросы для отображения разных фоновых изображений. На рабочем столе все работает нормально, и я использовал инструменты Chrome для проверки устройств различных размеров, и все они тоже показали себя нормально.

После развертывания моего сайта он работает на рабочем столе и в инструментах Chrome, но не когда я открываю его на своем телефоне. И я понятия не имею, как это исправить. Я попытался изменить размер изображения по сравнению с первым размером, который у меня был, но это не сработало. Я пробовал браузер Chrome на своем телефоне и Safari, он не работает, и телефон другого человека не работает. Значит что-то с кодировкой.

Это мои стили.

.showcase-button {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

.showcase:hover {
    opacity: 0.7;
    cursor: pointer;
}

.about-me-section {
    background: url("/assets/about-me-bk.png");
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #F7F7F7 !important;
}



.home-section {
    background: url("/assets/home-bk.png");
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white !important;
    font-size: 12px !important;
}

@media (max-width: 480px) {
    .home-section {
        background: url("/assets/home-bk-phone.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .home-section {
        background: url("/assets/home-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 1024px) and (min-width: 481px) and (orientation: landscape) {
    .home-section {
        background: url("/assets/home-bk-tablet.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 480px) {
    .about-me-section {
        background: url("/assets/about-me-bk-phone.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
        font-size: 16px !important;
    }
}

@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .about-me-section {
        background: url("/assets/about-me-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 1024px) and (min-width: 481px) and (orientation: landscape) {
    .about-me-section {
        background: url("/assets/home-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

И вот мой HTML:

<app-header></app-header>
<div #home name = "home" class = "h-screen home-section">

</div>
<div #portfolio name = "portfolio" class = "h-full bg-gray-100">
  <div class = "grid m-0 pt-6">
    <div class = "col-12 lg:col-6 relative showcase" (click) = "goToLink(1)">
      <img src = "assets/natrium-showcase.png" alt = "Image" class = "w-full border-round-3xl shadow-4">
    </div>
    <div class = "col-12 lg:col-6 relative showcase lg:mt-8" (click) = "goToLink(2)">
      <img src = "assets/urban-sweets-showcase.png" alt = "Image" class = "w-full border-round-3xl shadow-4">
    </div>
    <div class = "col-12 lg:col-6 relative showcase" (click) = "goToLink(3)">
      <img src = "assets/carolecolt-showcase.png" alt = "Image" class = "w-full border-round-3xl shadow-4">
    </div>
    <div class = "col-12 lg:col-6 relative showcase lg:mt-8" (click) = "goToLink(4)">
      <img src = "assets/hoopfire-showcase.png" alt = "Image" class = "w-full border-round-3xl shadow-4">
    </div>
  </div>
</div>
<div #about name = "about" class = "h-screen about-me-section">
  <div class = "flex h-full p-8 lg:p-0 lg:justify-content-end lg:align-items-center">
    <div class = "w-full text-center lg:text-right lg:w-5 lg:mr-8 lg:text-3xl">
      <p style = "background: #ffffffa8;">
        I am a full stack developer with a personal priority focus on front end development and web design. I currently
        reside
        in Charlotte, NC. and work for Data Ventures. Developing unique and engaging websites and web applications is a
        passion of mine. Most of my current work (along with this website) exhibits my proficiency in the utilization of
        Angular. However, I enjoy expanding my knowledge by learning new and exciting languages that will help to further
        my
        craft in web development.
      </p>
      <p style = "background: #ffffffa8;">
        When I'm not immersed in code and web applications, I enjoy sports of almost any kind. Because of the complexity
        and
        spontaneity of these two worlds, finding ways to incorporate web design and sports has become a passion of mine.
        Apart
        from this, my aspirations include exploring new ways to display and interact with the user, regardless of the
        content.
        Overall, I enjoy building websites and creating web applications, watching movies and playing basketball with my
        amazing wife (3x Co-Ed league champs), hanging out with our adorable Miniature Dachshund, watching my son grow up,
        sipping on a nice cold beer, and just enjoying what life decides to throw at me.
      </p>
    </div>
  </div>
</div>