Safari CSSの問題/背景画像

Question

私は画面の背景画像を持っています。これはアスペクト比を維持し、すべてのブラウザでうまく動作しますが、Safariでは動作しません。私はCSSをうまく使いこなしていますが、この時点では問題の内容を正確には分かりません。 Safariが垂直方向の中心を維持する問題があり、上下にギャップを作成しているようです：

<div id="bg"> 
    <div style="display: table-cell"> 
     <table cellpadding="0" cellspacing="0"> 
      <tr> 
       <td class="loading"><img src="images/home.jpg" /></td> 
      </tr> 
     </table> 
    </div> 
</div> 

CSS：

html,body,#bg,#bg table,#bg td { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
    position: relative 
    } 

#bg div{ 
    position:absolute; 
    width:200%; 
    height:200%; 
    top:-50%; 
    left:-50% 
    } 

#bg td{ 
    vertical-align:middle; 
    text-align:center 
    } 

#bg img{ 
    min-height:50%; 
    min-width:50%; 
    margin:0 auto; 
    display: table 
    } 

どれCSSここ CR ハック？

Answer 1

CSSで背景イメージの代わりに実際のイメージをバックグラウンドとして使用する場合は、不要なマークアップをデザインに導入しないため、JavaScriptソリューションがニーズに適している可能性があります。

jQueryMaxImageをチェックアウト：http://www.aaronvanderzwan.com/maximage/、ここでは、私が書いた、jquery.FullScreenBGです：https://github.com/huntedsnark/jquery.fullScreenBG

スクリプトでそれを行うにはしたくない場合は、CSSの＃プラス非を使用して、それを行う方法があります互換性のための標準的なCSS：

html { 
    background: url(images/yourImage.jpg) no-repeat center center fixed; 

    /* CSS3 */ 
    background-size: cover; 

    /*other browser specific */ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 

    /* non-standard for IE */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.yourImage.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourImage.jpg', sizingMethod='scale')" 
} 

あなたが本当に背景画像のためにテーブルマークアップのすべての種類を追加するべきではありません。