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

У меня есть веб-сайт, который имеет фиксированный фон с полным изображением, который "плавает" выше. Он отлично работает в настольных браузерах, но фиксированный фон заканчивается прокруткой на iPads и других планшетах. Кажется, это распространенная проблема, но затем я столкнулся с этим сайтом, который, похоже, имеет фиксированный фон даже на 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, поэтому это не стенография).

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

18
css fixed html ipad mobile

4 ответов

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

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

Edit:

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

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

здесь аналогичное решение:

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

Edit-2:

добавлена скрипка вы можете проверить:

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

и вот ссылка, чтобы попробовать его на iPad:

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

7

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

7

хорошо, поэтому я уже построил этот сайт, часть с фиксированным фоном будет испорчена, если я заверну ее в 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); 

        }

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

0

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

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

<body> <div id="fixedbg"></div> <!-- CONTENT HERE --> </body>

0