background не реагирует на изменение масштаба

Будучи начинающим программистом, уже третий день бьюсь с решение проблемы связанной с Бэкграундом. Буду очень благодарен за помощь или подсказкой в какую сторону копать. Ситуация следующая:

адрес сайта: https://just-bird.github.io/Vanda-website-v1/

Часть кода которая отвечает за данную проблему (как я думаю) опыта пару недель всего:

```<div class="intro">
    
        <div class="container__intro">
                                       
            <div class="intro__inner">
                <h1 class="intro__title">VanDa Star</h1>
                <h2 class="intro__suptitle">Fuckin guru</h2>
                
            </div>
            </div>
            
            
        </div>
    </div>```

 
```/* Container__intro */
.container__intro {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}


/* Intro */
.intro {
    position: relaataive;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 150vh;
    background-attachment: fixed;
    background: url("../images/test.jpg");
    background-position: center center; 
    background-repeat: no-repeat; 
    background-color: white;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 30% 0%;
    background-attachment: scroll;
    margin: 0px;```