Wie Body/HTML Hintergründe mit CSS in Ipad/Iphone (Safari) zu verknüpfen

Question

Ich konfiguriere meine 404-Seite.

Auf dieser Seite Ich habe nur einen "Deckel" Hintergrund mit:

html { 
    background: url(../img/404.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    overflow: hidden; 
} 

kein Problem .. Die 404.jpg Bild Abdeckung aller Bildschirm in IE, Rand, Chrom und iPad/iPhone Safari.

Aber .. weil dies eine 404-Seite ist - ich habe eine Nachricht: "KLICKEN SIE HIER, um nach Hause zurückzukehren."

und erstellen Sie einen "klickbaren Hintergrund" mit diesem:

html #background-link { 
position: absolute; 
height:11000px; 
text-indent:-9999px; 
width:1440px; 
top: 0; left: 0; 
border: 0; 
float: left; 
} 

funktioniert auf IE, Rand, Chrome ..

aber .. auf IPAD/IPHONE Safari - das Hintergrundbild erscheint größer, vielleicht mit 100% seiner Originalgröße - und nicht als Cover (wie Works ohne den zweiten css code).

aber die "Verbindung" Funktioniert gut.

Das einzige Problem ist das Coverbild - in meinem Fall, auf IE/EDGE/CHROME sehe ich einen Mann vor einem blauen Bildschirmhintergrund. auf IPAD/IPHONE sehe ich nur einen blauen Bildschirmhintergrund - in diesem Fall die obere linke Ecke .. nicht das Bild als Deckbildschirm.

Answer 1

Dies ist wegen der Abmessungen, die Sie für den #background-link Selektor bieten; Sie sind größer als die Bildschirmgröße des Geräts, auf dem Sie sich gerade befinden, und erzwingen, dass die Größe der Seite wächst, um sie anzupassen.

Eine Lösung ist, sondern explizit Größen bereitstellt, zu schaffen Werte für alle vier Positionierungseigenschaften, etwa so:

#background-link{ 
    border:0; 
    bottom:0; 
    left:0; 
    position:absolute; 
    right:0; 
    text-indent:-9999px; 
    top:0; 
} 

Hinweis: wie pro Daniels Kommentar unten, die overflow:hidden Erklärung über den html Tag wird auch müssen entfernt werden, damit diese Lösung korrekt funktioniert.