background-attachment: исправлено на мобильном телефоне

Question

background-attachment: исправлено на мобильном телефоне

Я пытаюсь установить фоновое изображение для веб-приложения spn, и мне нужно исправить фон (чтобы он не прокручивался с остальной частью страницы).

это тело css:

body {
  background-color: rgb(51, 102, 102);
  background-image: url('../images/background.png');
  background-attachment: fixed;
  background-position: center;
  color: #eee;
}

Safari в IOS и Chrome на Android повторяют фон, а не исправляют его в одной точке.

Я видел в Интернете, что он был отключен на мобильном телефоне, но есть ли решение?

1

android css ios fixed background-attachment

Источник

user6851981 16 дек '16 в 18:31

2 ответа

Другие вопросы по тегам android css ios fixed background-attachment

user1486483 16 дек '16 в 19:01 2016-12-16 19:01 · Answer 1 · 2016-12-16 19:01

background-repeat: no-repeat;
background-position: center center;

0

Источник

user1486483 16 дек '16 в 19:01

user7847907 12 апр '17 в 04:36 2017-04-12 04:36 · Answer 2 · 2017-04-12 04:36

Есть другие варианты сделать это, но это единственный, который действительно работал для меня; и я попробовал почти все из них.

Вы устанавливаете div чуть ниже начального тега. Затем примените изображение к HTML в div. Также укажите атрибут div и id (в этом случае #background_wrap). ... Я попробовал это, не применяя фактическую ссылку на изображение в html, и она никогда не работала должным образом, потому что вы все равно должны использовать атрибут "background-image:" при применении изображения к фону в css. Хитрость, чтобы заставить это работать на мобильном устройстве, не использует какие-либо настройки фонового изображения. Эти значения были характерны для моего проекта, но он отлично работал, чтобы мое фиксированное фоновое изображение оставалось центрированным и отзывчивым как для мобильных, так и для больших компьютерных видовых экранов. Возможно, придется немного подправить значения для вашего конкретного проекта, но стоит попробовать! Надеюсь, это поможет.

<body>
     <div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>

Затем примените эти настройки в CSS.

#background_wrap {
margin-left: auto;
margin-right: auto;   
}
    #background_wrap img {
        z-index: -1;
        position: fixed;
        padding-top: 4.7em;
        padding-left: 10%; 
        width: 90%;
     }