webentwicklung-frage-antwort-db.com.de

Fixierter Hintergrund für iOS

Ich habe eine Website, die über einen festen Hintergrund mit festem Bild verfügt, dessen Inhalt oben "schwimmt". In Desktop-Browsern funktioniert das einwandfrei, aber der feste Hintergrund führt zu einem Bildlauf auf iPads und anderen Tablets. Dies scheint ein häufiges Problem zu sein, aber dann bin ich auf diese Website gestoßen, die selbst auf dem iPad einen festen Hintergrund zu haben scheint.

http://confitdemo.wordpress.com/

Gibt es eine Ahnung, wie sie das schaffen? Ich habe es versucht:

#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;
}

(Dies wurde von Firebug kopiert, weshalb es keine Abkürzung ist).

Hatte aber kein Glück. Wer bringt mich in die richtige Richtung?

18
JeremyE

Ich denke, das Problem liegt darin, dass Ihre Tabelle höchstwahrscheinlich die Größe des Hintergrunds ändert. Wenn Sie also diese Deklarationen hinzufügen, sollte dies in der Regel sehr gut laufen.

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

Bearbeiten:

Wenn dies nicht funktioniert, kann ich nur daran denken, dass ios die Größe des Körpers irgendwie ändern muss, um so groß wie der Inhalt zu sein. Sie müssen dann ein div innerhalb des body-Tags mit den richtigen Eigenschaften erstellen

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

Hier ist eine ähnliche Lösung:

Wie kann ich mit Phonegap eine feste Hintergrundposition in der jquery mobile für iPhone-App einstellen

Edit - 2:

Eine Geige hinzugefügt, die Sie überprüfen können:

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

Und hier ist ein Link, um es auf Ihrem ipad auszuprobieren:

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

7
Breezer

Diese Website verwendet in mobilen Browsern einen Trick und nutzt die Tatsache aus, dass background-attachment: fixed zwar nicht funktioniert, position: fixed jedoch funktioniert. In mobilen Browsern wird lediglich ein <div> erstellt, der hinter dem Bildlaufinhalt fixiert bleibt.

7
rev087

ok, also ich baue schon diese Seite, der Teil mit einem festen Hintergrund würde durcheinander gebracht werden, wenn ich ihn in ein div einwickeln würde, um diesem div eine feste Position zu geben. Also habe ich das geschrieben und es funktioniert auf dem iPhone.

Ich habe einen festen Header, also war das einfach zu benutzen, aber alles, was sich immer oben im Viewport befindet, wird alles ...

        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); 

        }

und geben Sie dem Element dann einen Übergang zur Hintergrundposition, und Sie sind fertig. Nicht so nett ... und ich glaube, es gibt eine bessere Lösung ... aber das funktioniert.

0

1) z-index: -1; muss dem zweiten Ansatz von Breezer hinzugefügt werden, wenn Sie Verknüpfungsbilder verwenden, da die Bilder sonst verborgen bleiben (hinter dem Hintergrund).

2) Bei demselben Ansatz musste ich das div wie folgt vor den Rest des Inhalts setzen, oder die Seite war nicht scrollbar, wenn der Inhalt innerhalb der div-Tags hinzugefügt wurde:

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

0
Rafael