Ipad/Iphone（safari）でBody/Htmlの背景とCSSをリンクする方法

Question

404ページを設定しています。

私は使用して "COVER" の背景を置くこのページで

：

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

問題なし。.. 404.jpgの画像カバーIE、エッジ、ChromeとIPAD/IPHONE Safariですべての画面。

しかし、これは404ページなので、私は次のようなメッセージを出しました： "ここに戻るにはここをクリック" IPAD/IPHONEのSafari上のIE、エッジ、クロームの

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

作品罰金...

けど... - 背景画像は、大きな表示されます。

、これと "クリッカブル背景" を作成多分元のサイズの100％で - カバーとしてではなく（2番目のCSSコードなしのWorksとして）。

"リンク"はうまく動作します。

唯一の問題はカバーイメージです - 私の場合、IE/EDGE/CHROMEには、ブルースクリーンの背景の前にマンが見えます。 on IPAD/IPHONE私はブルースクリーンの背景だけを見ています - この場合は、左上隅です。カバー画面としてのイメージではありません。

Answer 1

これは、#background-linkセレクタに提供する寸法のためです。表示されているデバイスの画面サイズよりも大きくなっているため、ページのサイズを大きくしてそれに合わせる必要があります。

一つの解決策はそうのように、すべての4つの位置決め用のプロパティの値を提供するために、代わりに明示的なサイズを提供する、次のとおりです。

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

注：以下のダニエルさんのコメントどおり、htmlタグのoverflow:hidden宣言はまた、意志このソリューションが正しく機能するためには、削除する必要があります。