Фоновое изображение отображается увеличенным на экранах мобильных устройств

#css #background-image #viewport

#css #фоновое изображение #окно просмотра

Вопрос:

Я создаю проект для школы, и у меня возникли проблемы с фоновым изображением. Для этого я использовал этот фрагмент кода (https://css-tricks.com/perfect-full-page-background-image /), и он отлично работает на настольных компьютерах и в Chrome Dev Tools (то есть для мобильных устройств). Он не работает должным образом, когда я открываю свой веб-сайт в Chrome или Safari на своем телефоне. Скриншоты следующим образом:

Chrome на телефоне

Вот мой код на CSS:

 .container-hero {
height: 100vh;
width: 100%;
background: url("../images/hero-image.jpg") no-repeat center center fixed;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

}

 <div class="container-fluid container-hero">
        <div class="row">
            <div class="col-12">
                <div class="hero-j jumbotron text-center text-uppercase text-white">
                    <div class="container">
                        <h1 class="display-4 section-header">Be a hero.</h1>
                        <hr class="block-divider--white">
                        <p class="hero-j text"> At Doug's, we <strong>Evolve</strong> together.</p>
                        <a href="#signup" class="btn btn-lg button-signup">
                        Sign me up!
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Я очень признателен за помощь!

1. Можете ли вы также опубликовать свой HTML-код? Кроме того, как именно вы хотите, чтобы ваш фон выглядел на мобильных устройствах?

2. Привет, какие версии телефона, ОС и браузера вы используете?

3. Эй, ребята, я добавил html div, касающийся этого класса в CSS — надеюсь, это поможет!

Ответ №1:

IOS Safari и, следовательно, IOS Chrome не поддерживают fixed on background. Смотрите https://caniuse.com/?search=fixed

Я попробовал ваш CSS с моим собственным изображением, и оно было нечетким. Удаление исправленного из этого утверждения прояснило ситуацию.

 background: url("https://ahweb.org.uk/gear.jpg") no-repeat center center;

Не зная точной компоновки вашего кода, трудно понять, будет ли этого достаточно или вам придется использовать изображение в качестве фона другого контейнера, чтобы оно всегда оставалось в поле зрения, если это требуется.