Фоновые изображения увеличить при прокрутке - PullRequest
Новая
       26

Фоновые изображения увеличить при прокрутке

0 голосов
/ 15 октября 2018

Я только что проверил свой сайт-портфолио на своем мобильном телефоне и заметил, что фоновые изображения увеличиваются и уменьшаются при прокрутке.Я тестировал на Chrome, Safari, Firefox и Edge.Safari - это браузер, в котором все работает нормально.Я не уверен, почему это происходит.Буду признателен за любую помощь.

сайт http://johncyzeski.com/

Я опубликую код для раздела целевой страницы только для того, чтобы я не публиковал код для всего проекта.

Соответствующий HTML 

<section class="landing-page">
                <div class="landing-flex-container">
                    <div>
                        <h2 class="">John Cyzeski</h2>
                        <p class="">Welcome, I am a front-end web developer who is passionate about learning and creating</p>
                        <div class="button-container scroll">
                            <h3>
                                <a href="#about">learn more</a>
                            </h3>
                        </div>
                    </div>
                </div>
            </section>

Соответствующий CSS 

.landing-page {
    /* background-color: var(--powder); */
    background: url('images/pineapple.jpg') center center;
    background-size: cover;
    height: 70vh;
}

.landing-flex-container {
    display: flex;
    height: 70vh;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0, 0.2);
}

.landing-flex-container div {
    width: 80%;
    text-align: center;

}

.landing-flex-container div h2 {
    padding-bottom: 20px;
    color: white;
}

.landing-flex-container div p {
    line-height: 1.5rem;
    padding-bottom: 20px;
    color: white;
}


/***** Media Queries *****/


@media only screen and (min-width: 475px) {

            .landing-flex-container div {
                text-align: left;
            }

            .landing-flex-container div div {
                width: 200px;
            }

}

@media only screen and (min-width: 760px) {
    .landing-page {
        height: 90vh;
    }
    .landing-flex-container {
        height: 90vh;
    }
    .landing-flex-container div div {
        text-align: center;
    }
    .landing-flex-container div h3 {
        display: inline-block;

    }
    .landing-flex-container div h2 {
        font-size: 2.5rem;
    }

    .landing-flex-container div p {
        font-size: 1.2rem;
    }

    .landing-page div h3::before,
    .landing-page div h3::after {
            display: none;
    }
}

@media only screen and (min-width: 1000px) {
    .landing-flex-container div h2 {
        font-size: 3rem;
    }

    .landing-flex-container div p {
        font-size: 1.5rem;
    }

}

@media only screen and (min-width: 1280px) {
    .landing-page {
        height: 100vh;
        width: 80vw;
        float: right;
    }

    .landing-flex-container {
        height: 100vh;
    }
}

Итак, опять же, Safari кажется единственным браузером, в котором фоновые изображения не увеличиваются и не уменьшаютсяпрокрутки.

...