Свойство 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, или возникли вопросы — форма для отправки комментария внизу.


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

  • КРАСАВА, выручил, ковырял 3 дня, спасибо огромное!!!

    Георгий
  • А как это применить в WordPress? Спасибо

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

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

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

          Дмитрий Ильичев
  • Спасибо за простой и ценный совет.

    Александр
  • Благодарю за статью, очень помогло!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

*

*