Исправлено положение фона на iOS

У меня есть веб-сайт с фиксированным фоном с полным изображением, который контент "плавает" выше. Он отлично работает в настольных браузерах, но фиксированный фон заканчивается прокруткой на iPad и других планшетах. Это, кажется, общая проблема, но затем я столкнулся с этим сайтом, который, кажется, имеет фиксированный фон даже на iPad.

http://confitdemo.wordpress.com/

Какую-нибудь подсказку, как они это снимают? Я пробовал:

#content-wrapper.posts-page {
background-attachment: fixed !important;
background-clip: border-box;
background-color: transparent;
background-image: url("image path");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}

(Это было скопировано из Firebug, поэтому оно не сокращается).

Но не повезло. Кто-нибудь заставляет меня указывать в правильном направлении?

Ответы

Ответ 1

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

background-attachment: fixed !important;
background-size: cover !important;

Edit:

Если это не работает только по другой причине, я могу подумать, что ios должен каким-то образом изменить размер тела, чтобы быть таким же большим, как контент, что вам нужно сделать, это создать div внутри тега body с правильными свойствами

#fixebg{
background: url(image.jpg) top;
height:100%;
width:100%;
position:fixed;
}

Вот аналогичное решение:

Как установить фиксированную позицию Фоновое изображение в jQuery mobile для iPhone с помощью Phonegap

Изменить - 2:

Добавлена скрипка, которую вы можете проверить:

http://jsfiddle.net/uZRXH/3/

И вот ссылка, чтобы попробовать его на вашем ipad:

http://fiddle.jshell.net/uZRXH/3/show

Ответ 2

Этот веб-сайт использует трюк в мобильных браузерах, используя тот факт, что пока background-attachment: fixed не работает, position: fixed делает, поэтому в мобильных браузерах он просто создает <div>, который остается фиксированным за прокручиваемым контентом.

Ответ 3

ok, поэтому я уже построил этот сайт, часть с фиксированным фоном перепуталась бы, если бы я завернул его в div, чтобы дать этому div фиксированную позицию. Поэтому я написал это, и он работает на iPhone.

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

        if (//on mobile) {
            var headerH, headerH2, viewportH, sliderH, res
            viewportH = $(window).height(),
            headerH2 = 80 //correction when measuring with fixed header,
            $topheader = $('.top_header'),
            $slider = $('#twinslider') //the element to check for if in viewport;
            function getH() {
                headerH = $topheader.offset().top;
                sliderH = $slider.offset().top;
                res = (((headerH - headerH2) - sliderH) + viewportH) / viewportH;
                if (res > 0 && res < 1.4)  {
                    return res; // thats truthy and a value for further calculation
                } else {
                    return false;
                }
            }
            getH();

            setInterval(function(){ // before i listened to scroll, but this was better for performance
                if (getH()) {//if slider is in viewport
                    $slider.find('li').css({ //the element to set the background pos for
                        'background-position': 'center ' + res * 50 + '%'
                    }, 100);

                }                   
            }, 25); 

        }

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

Ответ 4

1) z-index: -1; должен быть добавлен к второму подходу Breezer, если у вас есть изображения ссылок, иначе изображения будут скрыты (за фоном)

2) На том же самом подходе я должен был поместить div перед остальной частью контента следующим образом, или страница не была прокручима, если содержимое добавлено внутри тегов div:

<body> <div id="fixedbg"></div>  </body>