Фиксированный фон на iOS

Свойство background-attachment: fixed несколько некорректно отображается на мобильных устройствах Apple. Но кроссбраузерное решение есть всегда!

Раз фон нормально не фиксируется, то блоки фиксируются точно. Именно на этом принципе основано следующее решение:

<!DOCTYPE html>
<html>

<head>
    <title>Фиксированный фон для iOS</title>
</head>
<style>
body,
html {
    position: absolute;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    top: 0;
    left: 0;
    min-height: 100%;
}

.fixed-crossbrowser-background {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url("background.jpg");
    opacity: 1;
    z-index: -1;
}
</style>

<body>
    <div class="fixed-crossbrowser-background"></div>
    <!--
      *
      *  Далее весь остальной контент
      *
    -->
</body>

</html>

Пожалуй, это самый приемлемый и рациональный вариант из тех, что мне приходилось применять для решения этой проблемы. Обошлось даже без javascript.

Если есть что добавить по теме backgroud-fixed на iOS или как зафиксировать фон для iphone и ipad, или возникли вопросы — форма для отправки комментария внизу.

9 комментариев

Георгий 27.07.2016 в 18:03
КРАСАВА, выручил, ковырял 3 дня, спасибо огромное!!!
Yury 03.12.2016 в 19:09
А как это применить в WordPress? Спасибо

Дмитрий Ильичев 04.12.2016 в 14:06
Прописать стили в файле темы
/wp-content/themes/ваша_тема/style.css
и добавить блок, который будет выполнять функции фона в
/wp-content/themes/ваша_тема/header.php

Yury 04.12.2016 в 14:14
Прошу прощения, а не могли бы вы подсказать, что именно прописывать?? Сам код стилей и блока. А то боюсь напортачить. Огромное вам спасибо.

Дмитрий Ильичев 04.12.2016 в 14:39
Напишите пожалуйста на info@dmitriyilichev.com, или свяжитесь со мной в социальной сети, в частном порядке посмотрим Ваш случай.

Александр 07.03.2017 в 15:40
Спасибо за простой и ценный совет.
Roman 25.08.2017 в 15:29
Благодарю за статью, очень помогло!
sammy 26.12.2019 в 19:12
Подтверждаю, работает корректно. Единственный минус данного подхода, что нельзя обойтись без вставки дополнительного html-кода.
Дмитрий 15.02.2020 в 01:03
Сделал по инструкции, но увы. Пробовал разными способами всё безуспешно…кстати elementor в wordpress делаем самым стандартным способом и вообще не поддерживает fixed в мобильном эмуляторе

Добавить комментарий Отменить ответ